/* global React */
/* ============================================================
   Main pages — Home, Conversation, Perspective, Speaking
   ============================================================ */
const { useState: pState, useEffect: pEffect, useMemo: pMemo } = React;

/* ============================================================
   HOME
   ============================================================ */
function HomePage() {
  return (
    <div className="page-fade">
      {/* PAIN: Problem & Recognition */}
      <HomeHero />
      <HomeLeakage />

      {/* DESIRE: Vision & Authority */}
      <HomePhilosophy />
      <HomeAboutDaniel />

      {/* URGENCY: Diagnostic Entry Point */}
      <HomeAuditThreshold />

      {/* CTA: Offerings & Action */}
      <HomeEngagements />
      <HomeFieldNotes />
      <HomeClose />
    </div>
  );
}

/* ----- Hero ----- */
function HomeHero() {
  const tw = useTw();
  const asym = tw.asymmetry || 'asymmetric';

  // Asymmetry tweak controls the hero grid + portrait offset
  const cols = {
    centered:   '1fr',
    balanced:   '1fr 1fr',
    asymmetric: '1.35fr 1fr',
  }[asym];
  const offset = {
    centered:   0,
    balanced:   0,
    asymmetric: 72,
  }[asym];

  return (
    <section style={{
      position: 'relative',
      minHeight: '100vh',
      overflow: 'hidden',
      paddingTop: 168,
      paddingBottom: 80,
      display: 'flex',
      flexDirection: 'column',
    }}>
      {/* lighthouse atmospheric layer — single, very low opacity */}
      <img src="assets/logos/daniel-pledger-on-navy.jpg"
           alt="" aria-hidden
           style={{
             position: 'absolute',
             right: '-6%', top: '-14%',
             width: '64%', maxWidth: 820,
             opacity: 0.045,
             mixBlendMode: 'screen',
             pointerEvents: 'none',
           }} />
      <Beam intensity={0.6} from="-2%" width="85%" angle={-9} sweep />

      <div className="container" style={{
        position: 'relative', zIndex: 2,
        display: 'grid',
        gridTemplateColumns: cols,
        gap: 80,
        alignItems: 'center',
        flex: 1,
      }} data-asym="">
        <Reveal>
          <Eyebrow>Executive Authority Advisory · By inquiry</Eyebrow>

          <h1 className="t-h1" style={{
            fontSize: 'clamp(48px, 6.4vw, 96px)',
            fontWeight: 600,
            lineHeight: 0.98,
            letterSpacing: '-0.035em',
            color: '#fff',
            margin: '26px 0 36px',
            textWrap: 'balance',
          }}>
            Identity Holding<br/>
            <span style={{
              color: 'var(--c-glow-200)',
              fontStyle: 'italic',
              fontWeight: 300,
            }}>Under</span> Pressure.
          </h1>

          <p className="col-narrow" style={{
            fontSize: 'clamp(17px, 1.4vw, 21px)',
            color: 'var(--c-steel-300)',
            lineHeight: 1.55,
            fontWeight: 300,
            margin: '0 0 44px',
            maxWidth: '44ch',
          }}>
            Private advisory for senior leaders who have outgrown the performance, and need their signal to carry when the room is loudest.
          </p>

          <div style={{ display: 'flex', gap: 22, alignItems: 'center', flexWrap: 'wrap' }}>
            <Button variant="primary" href="/audit" size="lg">Take the audit</Button>
            <Button variant="text" href="/conversation" noIcon>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                Or request a private conversation
                <i data-lucide="arrow-right" style={{ width: 12, height: 12 }}></i>
              </span>
            </Button>
          </div>

          <div style={{
            display: 'flex', gap: 56, marginTop: 88,
            paddingTop: 30, borderTop: '1px solid var(--line)',
            flexWrap: 'wrap',
          }}>
            <Stat n="20+" l="Years coaching senior leaders" />
            <Stat n="140+" l="Private engagements" />
            <Stat n="6" l="Sectors" />
          </div>
        </Reveal>

        <Reveal delay={140} style={{ alignSelf: 'flex-start', paddingTop: offset }}>
          <PortraitSlot label="navy suit · seated · direct" tone="warm" src="assets/images/hero-daniel.jpg" />
          <div style={{
            marginTop: 18,
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'baseline',
            fontSize: 10,
            letterSpacing: '0.24em',
            textTransform: 'uppercase',
            color: 'var(--c-slate-ocean)',
            fontWeight: 500,
          }}>
            <span>Daniel Pledger</span>
            <span>Bangalore · Worldwide</span>
          </div>
        </Reveal>
      </div>

      <div className="container" style={{
        position: 'relative', zIndex: 2,
        marginTop: 40,
      }}>
        <ScrollHint label="Read on" />
      </div>
    </section>
  );
}

function Stat({ n, l }) {
  return (
    <div>
      <div style={{
        fontSize: 34,
        fontWeight: 500,
        color: '#fff',
        letterSpacing: '-0.025em',
        lineHeight: 1,
        fontVariantNumeric: 'tabular-nums',
      }}>{n}</div>
      <div style={{
        fontSize: 10,
        color: 'var(--c-slate-ocean)',
        letterSpacing: '0.22em',
        textTransform: 'uppercase',
        marginTop: 10,
        fontWeight: 500,
        maxWidth: 18 + 'ch',
      }}>{l}</div>
    </div>
  );
}

/* ----- Philosophy ----- */
function HomePhilosophy() {
  return (
    <section id="philosophy" className="section-tall" style={{ position: 'relative', overflow: 'hidden' }}>
      <Beam intensity={0.3} from="-10%" width="65%" angle={-6} drift soft sweep />

      <div className="container" style={{
        position: 'relative', zIndex: 2,
        display: 'grid',
        gridTemplateColumns: '1fr 1.6fr',
        gap: 96,
        alignItems: 'start',
      }} data-asym="">
        <Reveal>
          <Eyebrow>The premise</Eyebrow>
          <ThreadDivider style={{ marginTop: 28, marginBottom: 28 }} />
          <p style={{
            fontSize: 17,
            color: 'var(--c-steel-300)',
            lineHeight: 1.65,
            fontWeight: 300,
            maxWidth: '34ch',
            margin: 0,
          }}>
            A lighthouse does not chase ships. It does not move with the storm. It remains structurally aligned within itself.
            <br /><br />
            Because it is aligned, it emits a clear, unmistakable signal.
          </p>
        </Reveal>

        <Reveal delay={120}>
          <h2 className="t-h2" style={{
            fontSize: 'clamp(34px, 4vw, 64px)',
            fontWeight: 500,
            lineHeight: 1.04,
            letterSpacing: '-0.03em',
            color: '#fff',
            margin: '0 0 56px',
            textWrap: 'balance',
            maxWidth: '20ch',
          }}>
            When identity is aligned, every move becomes intentional.
          </h2>

          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            gap: 32,
            paddingTop: 36,
            borderTop: '1px solid var(--line)',
          }}>
            <Pillar k="01" t="Source" d="Internal calibration before external direction. Identity comes first." />
            <Pillar k="02" t="Stability" d="Identity holding firm under pressure. Authority not borrowed, embodied." />
            <Pillar k="03" t="Projection" d="Clear expression that shapes the room without performing in it." />
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Pillar({ k, t, d }) {
  return (
    <div>
      <Idx>{k}</Idx>
      <div style={{
        fontSize: 22,
        fontWeight: 500,
        color: '#fff',
        letterSpacing: '-0.012em',
        margin: '12px 0 12px',
      }}>{t}</div>
      <p style={{
        fontSize: 14,
        color: 'var(--c-steel-300)',
        lineHeight: 1.6,
        margin: 0,
        fontWeight: 300,
      }}>{d}</p>
    </div>
  );
}

/* ----- About Daniel ----- */
function HomeAboutDaniel() {
  return (
    <section style={{
      position: 'relative',
      overflow: 'hidden',
      padding: 'calc(140px * var(--tdp-density)) 0 calc(120px * var(--tdp-density))',
      background: 'var(--c-nightfall)',
    }}>
      <Beam intensity={0.25} from="60%" width="70%" angle={-8} drift soft sweep />

      <div className="container" style={{
        position: 'relative', zIndex: 2,
        display: 'grid',
        gridTemplateColumns: '1fr 1.4fr',
        gap: 80,
        alignItems: 'start',
      }} data-asym="">
        <Reveal>
          <Eyebrow>The coach</Eyebrow>
          <ThreadDivider style={{ marginTop: 28, marginBottom: 32 }} />

          <h2 className="t-h2" style={{
            fontSize: 'clamp(32px, 3.6vw, 52px)',
            fontWeight: 500,
            lineHeight: 1.08,
            letterSpacing: '-0.028em',
            color: '#fff',
            margin: '0 0 32px',
            textWrap: 'balance',
            maxWidth: '18ch',
          }}>
            Twenty years holding identity under consequence.
          </h2>

          <p style={{
            fontSize: 16,
            color: 'var(--c-steel-300)',
            lineHeight: 1.65,
            fontWeight: 300,
            margin: '0 0 24px',
            maxWidth: '45ch',
          }}>
            Executive coaching rooted in NLP, psychology, and decades of observing what happens to senior leaders when the stakes are real. Not performance coaching. Identity coaching.
          </p>

          <p style={{
            fontSize: 14,
            color: 'var(--c-steel-300)',
            lineHeight: 1.65,
            fontWeight: 300,
            margin: '0 0 32px',
            maxWidth: '45ch',
          }}>
            140+ senior leaders across 6 sectors. From board transitions to public moments to the quiet work of holding authority when fragmented.
          </p>

          <div style={{
            display: 'flex',
            gap: 32,
            paddingTop: 24,
            borderTop: '1px solid var(--line)',
            fontSize: 12,
            color: 'var(--c-slate-ocean)',
            letterSpacing: '0.18em',
            textTransform: 'uppercase',
            fontWeight: 500,
            flexWrap: 'wrap',
          }}>
            <div>
              <div style={{ color: '#fff', fontSize: 28, fontWeight: 500, marginBottom: 6 }}>20+</div>
              <div>Years coaching</div>
            </div>
            <div>
              <div style={{ color: '#fff', fontSize: 28, fontWeight: 500, marginBottom: 6 }}>140+</div>
              <div>Senior leaders</div>
            </div>
            <div>
              <div style={{ color: '#fff', fontSize: 28, fontWeight: 500, marginBottom: 6 }}>6</div>
              <div>Industries</div>
            </div>
          </div>
        </Reveal>

        <Reveal delay={140} style={{ alignSelf: 'flex-start' }}>
          <PortraitSlot label="introspective · direct presence · authority" tone="cool" src="assets/images/about-daniel.jpg" />
          <div style={{
            marginTop: 18,
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'baseline',
            fontSize: 10,
            letterSpacing: '0.24em',
            textTransform: 'uppercase',
            color: 'var(--c-slate-ocean)',
            fontWeight: 500,
          }}>
            <span>Daniel Pledger</span>
            <span>Coach · Bangalore</span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

/* ----- Audit threshold — the conversion moment ----- */
function HomeAuditThreshold() {
  return (
    <section style={{
      position: 'relative',
      background: 'var(--c-nightfall)',
      padding: 'calc(140px * var(--tdp-density)) 0 calc(140px * var(--tdp-density))',
      overflow: 'hidden',
    }}>
      <Beam intensity={0.45} from="55%" width="60%" angle={-12} drift soft sweep />
      <ImageSlot label="boardroom · empty · evening" tone="cool"
        src="assets/images/audit-boardroom.jpg"
        style={{ position: 'absolute', inset: 0, opacity: 0.22, aspectRatio: 'auto', height: '100%', borderRadius: 0 }}
        showLabel={false} />
      <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, var(--c-nightfall) 0%, rgba(19,23,30,0.6) 50%, var(--c-nightfall) 100%)' }} />

      <div className="container" style={{ position: 'relative', zIndex: 2 }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1.4fr',
          gap: 80,
          alignItems: 'center',
        }} data-asym="">
          <Reveal>
            <Eyebrow>The audit · Private</Eyebrow>
            <div className="thread-gold" style={{ marginTop: 24, marginBottom: 32, height: 2 }} />
            <p style={{
              fontSize: 11,
              letterSpacing: '0.24em',
              textTransform: 'uppercase',
              color: 'var(--c-slate-ocean)',
              fontWeight: 500,
              margin: '0 0 8px',
            }}>Seven minutes</p>
            <p style={{
              fontSize: 11,
              letterSpacing: '0.24em',
              textTransform: 'uppercase',
              color: 'var(--c-slate-ocean)',
              fontWeight: 500,
              margin: '0 0 8px',
            }}>Ten questions</p>
            <p style={{
              fontSize: 11,
              letterSpacing: '0.24em',
              textTransform: 'uppercase',
              color: 'var(--c-slate-ocean)',
              fontWeight: 500,
              margin: 0,
            }}>One reading</p>
          </Reveal>

          <Reveal delay={120}>
            <h2 className="t-h2" style={{
              fontSize: 'clamp(36px, 4.4vw, 70px)',
              fontWeight: 500,
              lineHeight: 1.02,
              letterSpacing: '-0.03em',
              color: '#fff',
              margin: '0 0 36px',
              textWrap: 'balance',
              maxWidth: '22ch',
            }}>
              The Executive Authority Signal Audit.
            </h2>

            <p style={{
              fontSize: 19,
              color: 'var(--c-steel-100)',
              lineHeight: 1.55,
              fontWeight: 300,
              margin: '0 0 28px',
              maxWidth: '50ch',
            }}>
              A private diagnostic for senior leaders. Not a quiz. A short, deliberate reading of where authority leaks when the stakes are real.
            </p>
            <p style={{
              fontSize: 15,
              color: 'var(--c-steel-300)',
              lineHeight: 1.65,
              fontWeight: 300,
              margin: '0 0 44px',
              maxWidth: '52ch',
            }}>
              Most leaders learn the answer the day after a meeting they wish they had held differently. The audit moves the reading earlier.
            </p>

            <Button variant="primary" href="/audit" size="lg">Begin the audit</Button>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

/* ----- Where authority leaks — a typographic interlude ----- */
function HomeLeakage() {
  const items = [
    { n: '01', t: 'Through explanation.', d: 'Adding clauses no one asked for. Defending a decision that did not need defending.' },
    { n: '02', t: 'Through pace.', d: 'Speed rises. Pitch rises. The body gives away what the words did not.' },
    { n: '03', t: 'Through deflection.', d: 'Reaching for the data, the team, the framework. Anything that is not the seat you occupy.' },
    { n: '04', t: 'Through delay.', d: 'Holding it perfectly in the meeting. Carrying the meeting home for a week.' },
  ];
  return (
    <section className="section">
      <div className="container">
        <Reveal>
          <div style={{ maxWidth: 880, marginBottom: 80 }}>
            <Eyebrow>The territory</Eyebrow>
            <h2 className="t-h2" style={{
              fontSize: 'clamp(32px, 3.6vw, 56px)',
              fontWeight: 500,
              lineHeight: 1.06,
              letterSpacing: '-0.028em',
              color: '#fff',
              margin: '20px 0 0',
              textWrap: 'balance',
            }}>
              Authority does not break in the meeting. It leaks before it.
            </h2>
          </div>
        </Reveal>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(2, 1fr)',
          gap: '1px',
          background: 'var(--line)',
          border: '1px solid var(--line)',
        }}>
          {items.map((it, i) => (
            <Reveal key={it.n} delay={i * 80}>
              <LeakCard {...it} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function LeakCard({ n, t, d }) {
  const [hover, setHover] = pState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        background: 'var(--bg)',
        padding: '48px 44px 52px',
        position: 'relative',
        overflow: 'hidden',
        minHeight: 260,
        display: 'flex',
        flexDirection: 'column',
        gap: 24,
        transition: 'background 320ms var(--ease-out)',
      }}>
      <HoverSweep active={hover} />
      <div style={{
        position: 'absolute', top: 0, left: 0,
        width: hover ? '40%' : 0, height: 2,
        background: 'var(--accent)',
        transition: 'width 480ms var(--ease-out)',
      }} />
      <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between' }}>
        <Idx>{n}</Idx>
        <span style={{
          fontSize: 11,
          letterSpacing: '0.22em',
          textTransform: 'uppercase',
          color: 'var(--c-slate-ocean)',
          fontWeight: 500,
          opacity: hover ? 1 : 0.6,
          transition: 'opacity 240ms',
        }}>Signature</span>
      </div>
      <div style={{
        fontSize: 'clamp(24px, 2.4vw, 36px)',
        fontWeight: 500,
        color: '#fff',
        lineHeight: 1.12,
        letterSpacing: '-0.022em',
        textWrap: 'balance',
      }}>{t}</div>
      <p style={{
        fontSize: 15,
        color: 'var(--c-steel-300)',
        lineHeight: 1.6,
        fontWeight: 300,
        margin: 0,
        maxWidth: '40ch',
      }}>{d}</p>
    </div>
  );
}

/* ----- Engagements ----- */
function HomeEngagements() {
  const items = [
    {
      idx: '01',
      eyebrow: 'Private · 1:1 · NLP-based',
      title: 'Executive Coaching',
      desc: 'For senior leaders ready to transform identity under pressure. Internal work, sustained over time. By discovery call.',
      commit: 'Ongoing',
      href: '/coaching',
    },
    {
      idx: '02',
      eyebrow: 'Private · Group · C-Suite',
      title: 'Off-Site Coaching Program',
      desc: 'For executive teams and boards. Intensive multi-day work on organizational identity, leadership culture, and collective authority.',
      commit: 'By inquiry',
      href: '/conversation',
    },
    {
      idx: '03',
      eyebrow: 'Public · Speaking · Events',
      title: 'Speaking Engagements',
      desc: 'On leadership identity, organizational authority, the psychology of presence under pressure. For conferences, retreats, corporate events.',
      commit: 'Limited',
      href: '/speaking',
    },
  ];
  return (
    <section id="engagements" style={{
      background: 'var(--c-nightfall)',
      padding: 'calc(120px * var(--tdp-density)) 0 calc(120px * var(--tdp-density))',
    }}>
      <div className="container">
        <Reveal>
          <div style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'flex-end',
            gap: 32,
            marginBottom: 72,
            flexWrap: 'wrap',
          }}>
            <div>
              <Eyebrow>Engagements</Eyebrow>
              <h2 className="t-h2" style={{
                fontSize: 'clamp(34px, 3.6vw, 56px)',
                fontWeight: 500,
                letterSpacing: '-0.028em',
                color: '#fff',
                margin: '18px 0 0',
                maxWidth: '22ch',
                textWrap: 'balance',
              }}>
                Three ways to engage. All by inquiry.
              </h2>
            </div>
            <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
              <Button variant="text" href="/coaching">Start coaching intake</Button>
              <Button variant="text" href="/conversation">All engagements</Button>
            </div>
          </div>
        </Reveal>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(3, 1fr)',
          borderTop: '1px solid var(--line)',
          borderLeft: '1px solid var(--line)',
        }} data-asym="">
          {items.map((it, i) => (
            <Reveal key={it.title} delay={i * 90}>
              <EngagementCard {...it} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function EngagementCard({ idx, eyebrow, title, desc, commit, href }) {
  const [hover, setHover] = pState(false);
  const onCardClick = () => {
    if (href) window.location.hash = href;
  };
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      onClick={onCardClick}
      role={href ? 'link' : undefined}
      style={{
        position: 'relative',
        overflow: 'hidden',
        padding: '38px 32px 36px',
        borderRight: '1px solid var(--line)',
        borderBottom: '1px solid var(--line)',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        gap: 22,
        transition: 'background 280ms var(--ease-out)',
        background: hover ? 'rgba(255,255,255,0.015)' : 'transparent',
        cursor: 'pointer',
      }}>
      <HoverSweep active={hover} />
      <div style={{
        position: 'absolute', top: 0, left: 0,
        height: 2,
        background: 'var(--accent)',
        width: hover ? '60%' : 0,
        transition: 'width 480ms var(--ease-out)',
      }} />
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <Eyebrow>{eyebrow}</Eyebrow>
        <Idx>{idx}</Idx>
      </div>
      <div style={{
        fontSize: 'clamp(24px, 2vw, 30px)',
        fontWeight: 500,
        color: '#fff',
        letterSpacing: '-0.018em',
        lineHeight: 1.14,
      }}>{title}</div>
      <p style={{
        fontSize: 14,
        color: 'var(--c-steel-300)',
        lineHeight: 1.62,
        margin: 0,
        fontWeight: 300,
        flex: 1,
      }}>{desc}</p>
      <div style={{
        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
        paddingTop: 18,
        borderTop: '1px solid var(--line)',
        fontSize: 12,
      }}>
        <span style={{ color: 'var(--c-steel-300)', letterSpacing: '0.04em' }}>{commit}</span>
        <span style={{
          color: hover ? 'var(--c-glow-200)' : 'var(--c-glow-500)',
          letterSpacing: '0.18em',
          textTransform: 'uppercase',
          fontWeight: 500,
          transition: 'color 220ms',
        }}>
          Inquire <i data-lucide="arrow-right" style={{ width: 12, height: 12, marginLeft: 3 }}></i>
        </span>
      </div>
    </div>
  );
}

/* ----- Field notes (typographic editorial list) ----- */
function HomeFieldNotes() {
  const notes = [
    { slug: 'leaders-who-never-explain', date: 'Nov 2026', kind: 'Field note',  cat: 'Composure', t: 'The leaders who never explain themselves into a room.', mins: 6 },
    { slug: 'composure-compounds',       date: 'Oct 2026', kind: 'On record',   cat: 'Identity',  t: 'Why composure compounds. And what corrodes it.',         mins: 8 },
    { slug: 'authority-not-borrowed',    date: 'Sep 2026', kind: 'Essay',       cat: 'Authority', t: 'Authority not borrowed, but embodied. A working theory.', mins: 11 },
  ];
  const router = useRouter();
  return (
    <section className="section">
      <div className="container">
        <Reveal>
          <div style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'flex-end',
            gap: 32,
            marginBottom: 64,
            flexWrap: 'wrap',
          }}>
            <div>
              <Eyebrow>Field notes</Eyebrow>
              <h2 className="t-h2" style={{
                fontSize: 'clamp(34px, 3.6vw, 56px)',
                fontWeight: 500,
                letterSpacing: '-0.028em',
                color: '#fff',
                margin: '18px 0 0',
                maxWidth: '20ch',
                textWrap: 'balance',
              }}>Notes from the room.</h2>
            </div>
            <Button variant="text" href="/insights">All writing</Button>
          </div>
        </Reveal>

        <ul style={{
          listStyle: 'none', padding: 0, margin: 0,
          borderTop: '1px solid var(--line)',
        }}>
          {notes.map((n, i) => (
            <Reveal key={n.slug} delay={i * 70} as="li">
              <FieldNoteRow n={n} onClick={() => router.go('/insights/' + n.slug)} />
            </Reveal>
          ))}
        </ul>
      </div>
    </section>
  );
}

function FieldNoteRow({ n, onClick }) {
  const [hover, setHover] = pState(false);
  return (
    <a
      href={'/insights/' + n.slug}
      onClick={(e) => { e.preventDefault(); onClick(); }}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: 'grid',
        gridTemplateColumns: '180px 1fr auto',
        gap: 40,
        padding: '38px 0 38px',
        borderBottom: '1px solid var(--line)',
        alignItems: 'baseline',
        textDecoration: 'none',
        position: 'relative',
        color: 'inherit',
        transition: 'padding-left 360ms var(--ease-out)',
        paddingLeft: hover ? 18 : 0,
      }}
      className="speaking-room field-note-row">
      <span
        aria-hidden
        style={{
          position: 'absolute',
          left: 0,
          top: '50%',
          transform: 'translateY(-50%)',
          width: hover ? 8 : 0,
          height: 1,
          background: 'var(--accent)',
          transition: 'width 360ms var(--ease-out)',
        }}
      />
      <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
        <span style={{
          fontSize: 11,
          letterSpacing: '0.22em',
          textTransform: 'uppercase',
          color: 'var(--accent)',
          fontWeight: 500,
        }}>{n.cat}</span>
        <span style={{
          fontSize: 11,
          letterSpacing: '0.16em',
          textTransform: 'uppercase',
          color: 'var(--c-steel-300)',
          fontWeight: 500,
        }}>{n.kind} · {n.date}</span>
      </div>
      <div style={{
        fontSize: 'clamp(22px, 2.4vw, 36px)',
        fontWeight: 500,
        color: hover ? '#fff' : 'var(--c-steel-100)',
        letterSpacing: '-0.022em',
        lineHeight: 1.18,
        transition: 'color 240ms var(--ease-out)',
        textWrap: 'balance',
        maxWidth: '32ch',
      }}>{n.t}</div>
      <div style={{
        display: 'inline-flex',
        alignItems: 'center',
        gap: 16,
        fontSize: 11,
        letterSpacing: '0.2em',
        textTransform: 'uppercase',
        color: hover ? 'var(--c-glow-200)' : 'var(--c-glow-500)',
        fontWeight: 500,
        whiteSpace: 'nowrap',
        transition: 'color 240ms var(--ease-out)',
      }}>
        <span>{n.mins} min</span>
        <i data-lucide="arrow-right" style={{
          width: 16, height: 16,
          transition: 'transform 360ms var(--ease-out)',
          transform: hover ? 'translateX(6px)' : 'translateX(0)',
        }}></i>
      </div>
    </a>
  );
}

/* ----- Close ----- */
function HomeClose() {
  return (
    <section style={{
      position: 'relative',
      overflow: 'hidden',
      padding: 'calc(160px * var(--tdp-density)) 0 calc(140px * var(--tdp-density))',
    }}>
      <Beam intensity={0.4} from="-12%" width="95%" angle={-6} drift soft sweep />
      <div className="container-narrow" style={{ position: 'relative', zIndex: 2, textAlign: 'center' }}>
        <Reveal>
          <Eyebrow style={{ display: 'inline-block' }}>By inquiry · Limited</Eyebrow>
          <h2 className="t-h2" style={{
            fontSize: 'clamp(40px, 5vw, 84px)',
            fontWeight: 600,
            letterSpacing: '-0.032em',
            lineHeight: 1.0,
            color: '#fff',
            margin: '28px auto 32px',
            maxWidth: '20ch',
            textWrap: 'balance',
          }}>
            When you are ready for a private conversation.
          </h2>
          <p style={{
            fontSize: 18,
            color: 'var(--c-steel-300)',
            lineHeight: 1.55,
            maxWidth: '56ch',
            margin: '0 auto 48px',
            fontWeight: 300,
          }}>
            A short note about the room you are trying to hold is usually enough. I respond personally within a week.
          </p>
          <Button variant="primary" href="/conversation" size="lg">Begin the inquiry</Button>
        </Reveal>
      </div>
    </section>
  );
}

/* ============================================================
   CONVERSATION
   ============================================================ */
const COUNTRIES = [
  'Australia', 'Austria', 'Bangladesh', 'Belgium', 'Brazil', 'Canada', 'Chile',
  'China', 'Colombia', 'Czech Republic', 'Denmark', 'Egypt', 'Finland', 'France',
  'Germany', 'Greece', 'Hong Kong SAR', 'Hungary', 'Iceland', 'India', 'Indonesia',
  'Ireland', 'Israel', 'Italy', 'Japan', 'Jordan', 'Kenya', 'Kuwait', 'Malaysia',
  'Mexico', 'Morocco', 'Netherlands', 'New Zealand', 'Nigeria', 'Norway', 'Oman',
  'Pakistan', 'Philippines', 'Poland', 'Portugal', 'Qatar', 'Romania', 'Saudi Arabia',
  'Singapore', 'South Africa', 'South Korea', 'Spain', 'Sri Lanka', 'Sweden',
  'Switzerland', 'Taiwan', 'Thailand', 'Türkiye', 'United Arab Emirates',
  'United Kingdom', 'United States', 'Vietnam', 'Other',
];

const FOCUS_OPTIONS = [
  { v: 'authority',  l: 'Executive presence & authority',  d: 'Being read the way I intend in the senior room.' },
  { v: 'scope',      l: 'A step up in scope',              d: 'New role, promotion, bigger seat than before.' },
  { v: 'team',       l: 'Building & leading a team',       d: 'Influence, culture, getting the best from people.' },
  { v: 'pressure',   l: 'Holding clarity under pressure',  d: 'Decisions and composure when stakes are high.' },
  { v: 'gap',        l: 'Closing the gap',                 d: "Between how I'm seen and how I actually feel." },
  { v: 'unsure',     l: 'Not sure yet',                    d: "I'll explain below." },
];

function ConversationPage() {
  const [form, setForm] = pState({
    name: '', email: '', country: '', company: '', role: '',
    linkedin: '', whatsapp: '', focus: '', context: '', urgency: 'measured',
  });
  const [submitted, setSubmitted] = pState(false);
  const [submitting, setSubmitting] = pState(false);
  const [error, setError] = pState(null);
  const loadedAt = pMemo(() => Date.now(), []);
  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  const submit = (e) => {
    e.preventDefault();
    setSubmitting(true);
    setError(null);
    fetch('/api/conversation.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ ...form, website: '', ts: loadedAt }),
    })
      .then((res) => res.json())
      .then((data) => {
        setSubmitting(false);
        if (data && data.ok) {
          setSubmitted(true);
        } else {
          setError('Something went wrong. Please try again, or email hello@pledgerspeaks.com directly.');
        }
      })
      .catch(() => {
        setSubmitting(false);
        setError('Something went wrong. Please try again, or email hello@pledgerspeaks.com directly.');
      });
  };

  if (submitted) return <ConversationReceived form={form} />;

  return (
    <div className="page-fade">
      <section style={{
        position: 'relative', overflow: 'hidden',
        paddingTop: 160, paddingBottom: 60,
      }}>
        <Beam intensity={0.4} from="-8%" width="65%" sweep />
        <div className="container" style={{ position: 'relative', zIndex: 2, display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 96 }} data-asym="">
          <Reveal>
            <Eyebrow>Discovery call</Eyebrow>
            <div className="thread-gold" style={{ marginTop: 24, marginBottom: 28 }} />
            <h1 className="t-h1" style={{
              fontSize: 'clamp(36px, 4.4vw, 60px)',
              fontWeight: 500,
              lineHeight: 1.04,
              letterSpacing: '-0.028em',
              color: '#fff',
              margin: '0 0 32px',
              textWrap: 'balance',
              maxWidth: '16ch',
            }}>
              Let's understand your situation.
            </h1>
            <p style={{
              fontSize: 16,
              color: 'var(--c-steel-300)',
              lineHeight: 1.65,
              fontWeight: 300,
              maxWidth: '42ch',
              margin: '0 0 28px',
            }}>
              The form below helps me understand the specific context you're navigating. Your answers shape our conversation.
            </p>
            <p style={{
              fontSize: 14,
              color: 'var(--c-steel-300)',
              lineHeight: 1.65,
              fontWeight: 300,
              maxWidth: '42ch',
              margin: '0 0 32px',
            }}>
              I read every submission personally. You'll hear back within a week with next steps.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, fontSize: 11, color: 'var(--c-slate-ocean)', letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 500 }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                <span style={{ color: 'var(--accent)', marginTop: 2 }}>✓</span>
                <span>Personal response</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                <span style={{ color: 'var(--accent)', marginTop: 2 }}>✓</span>
                <span>Confidential</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                <span style={{ color: 'var(--accent)', marginTop: 2 }}>✓</span>
                <span>No obligation</span>
              </div>
            </div>
          </Reveal>

          <Reveal delay={140}>
            <form onSubmit={submit} style={{
              display: 'flex', flexDirection: 'column', gap: 40,
              border: '1px solid var(--line)',
              padding: 56,
              background: 'rgba(255,255,255,0.012)',
            }}>
              {/* Contact Info Section */}
              <div>
                <div style={{
                  fontSize: 11,
                  letterSpacing: '0.24em',
                  textTransform: 'uppercase',
                  color: 'var(--accent)',
                  fontWeight: 500,
                  marginBottom: 24,
                }}>Your Information</div>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }}>
                  <FormField label="Name" required>
                    <input className="input" required value={form.name} onChange={set('name')} />
                  </FormField>
                  <FormField label="Email" required>
                    <input className="input" required type="email" value={form.email} onChange={set('email')} />
                  </FormField>
                  <FormField label="Country" required>
                    <select className="input" required value={form.country} onChange={set('country')}>
                      <option value="" disabled>Select your country</option>
                      {COUNTRIES.map(c => <option key={c} value={c}>{c}</option>)}
                    </select>
                  </FormField>
                  <FormField label="Company" required>
                    <input className="input" required value={form.company} onChange={set('company')} />
                  </FormField>
                  <FormField label="Role" required>
                    <input className="input" required value={form.role} onChange={set('role')} placeholder="CEO, Founder, VP..." />
                  </FormField>
                  <FormField label="LinkedIn profile" description="Optional. Helps me prepare.">
                    <input className="input" type="url" value={form.linkedin} onChange={set('linkedin')} placeholder="linkedin.com/in/..." />
                  </FormField>
                  <FormField label="WhatsApp number" description="Optional. Include country code.">
                    <input className="input" type="tel" value={form.whatsapp} onChange={set('whatsapp')} placeholder="+91 98765 43210" />
                  </FormField>
                </div>
              </div>

              {/* Focus Section */}
              <div>
                <div style={{
                  fontSize: 11,
                  letterSpacing: '0.24em',
                  textTransform: 'uppercase',
                  color: 'var(--accent)',
                  fontWeight: 500,
                  marginBottom: 24,
                }}>Your Focus</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 32 }}>
                  <FormField label="What are you looking to work on?" required>
                    <select className="input" required value={form.focus} onChange={set('focus')}>
                      <option value="" disabled>Select what fits closest</option>
                      {FOCUS_OPTIONS.map(o => <option key={o.v} value={o.v}>{o.l}</option>)}
                    </select>
                  </FormField>
                  <FormField label="The room you're holding" description="Describe the specific situation, the audience, the stakes." required>
                    <textarea
                      className="input"
                      required
                      rows={6}
                      value={form.context}
                      onChange={set('context')}
                      placeholder="The challenge you're facing. The moment you're preparing for or recovering from. Who depends on your clarity."
                      style={{ fontFamily: 'inherit' }}
                    />
                  </FormField>
                </div>
              </div>

              {/* Timing Section */}
              <div>
                <div style={{
                  fontSize: 11,
                  letterSpacing: '0.24em',
                  textTransform: 'uppercase',
                  color: 'var(--accent)',
                  fontWeight: 500,
                  marginBottom: 20,
                }}>Timing</div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
                  {[
                    { v: 'now', l: 'Within the month', d: 'Urgent. I need clarity soon.' },
                    { v: 'measured', l: 'Within a quarter', d: 'Thoughtful. I have some time.' },
                    { v: 'patient', l: 'When right', d: 'Open. Exploring options.' },
                  ].map(opt => (
                    <button key={opt.v} type="button"
                      onClick={() => setForm(f => ({ ...f, urgency: opt.v }))}
                      style={{
                        padding: '16px 20px',
                        border: '1px solid ' + (form.urgency === opt.v ? 'var(--accent)' : 'var(--line)'),
                        color: form.urgency === opt.v ? '#fff' : 'var(--c-steel-300)',
                        background: form.urgency === opt.v ? 'rgba(162,202,245,0.08)' : 'transparent',
                        fontSize: 14,
                        letterSpacing: '0.02em',
                        fontWeight: 400,
                        cursor: 'pointer',
                        transition: 'all 220ms var(--ease-out)',
                        borderRadius: 3,
                        textAlign: 'left',
                      }}>
                      <div style={{ fontWeight: 500, marginBottom: 4 }}>{opt.l}</div>
                      <div style={{ fontSize: 12, opacity: form.urgency === opt.v ? 0.8 : 0.6 }}>{opt.d}</div>
                    </button>
                  ))}
                </div>
              </div>

              {/* Submit */}
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, paddingTop: 12, borderTop: '1px solid var(--line)' }}>
                <span style={{ fontSize: 11, color: 'var(--c-slate-ocean)', letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 500 }}>
                  Marked · required · LinkedIn and WhatsApp optional.
                </span>
                <Button variant="primary" type="submit" size="lg" disabled={submitting}>
                  {submitting ? 'Sending…' : 'Send inquiry'}
                </Button>
              </div>
              {error && (
                <p style={{ fontSize: 13, color: 'var(--c-rose-400, #f87171)', margin: 0 }}>{error}</p>
              )}
            </form>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

function FormField({ label, description, required, children }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
      <div>
        <span style={{
          fontSize: 10,
          letterSpacing: '0.24em',
          textTransform: 'uppercase',
          color: 'var(--c-steel-100)',
          fontWeight: 500,
        }}>{label}{required && <span style={{ color: 'var(--accent)', marginLeft: 6 }}>·</span>}</span>
        {description && <div style={{
          fontSize: 12,
          color: 'var(--c-steel-300)',
          fontWeight: 300,
          letterSpacing: '0',
          textTransform: 'none',
          marginTop: 4,
        }}>{description}</div>}
      </div>
      {children}
    </label>
  );
}

const CAL_BOOKING_URL = 'https://cal.com/daniel-pledger-wqrojx/authority-signal-discovery-call';

function ConversationReceived({ form }) {
  const firstName = form.name?.split(' ')[0] || 'friend';
  const calSrc =
    CAL_BOOKING_URL +
    '?embed=true&layout=month_view&theme=dark' +
    (form.name ? '&name=' + encodeURIComponent(form.name) : '') +
    (form.email ? '&email=' + encodeURIComponent(form.email) : '');

  return (
    <div className="page-fade">
      <section style={{
        position: 'relative',
        overflow: 'hidden',
        paddingTop: 160,
        paddingBottom: 40,
      }}>
        <Beam intensity={0.35} from="-12%" width="90%" angle={-7} sweep />
        <div className="container-narrow" style={{ position: 'relative', zIndex: 2, textAlign: 'center' }}>
          <Reveal>
            <Eyebrow style={{ display: 'inline-block' }}>Received</Eyebrow>
            <div className="thread-gold" style={{ margin: '28px auto 36px' }} />
            <h1 style={{
              fontSize: 'clamp(40px, 5vw, 76px)',
              fontWeight: 500,
              lineHeight: 1.04,
              letterSpacing: '-0.03em',
              color: '#fff',
              margin: '0 auto 28px',
              textWrap: 'balance',
              maxWidth: '20ch',
            }}>
              Thank you, {firstName}.
            </h1>
            <p style={{
              fontSize: 19,
              color: 'var(--c-steel-100)',
              lineHeight: 1.6,
              maxWidth: '52ch',
              margin: '0 auto 16px',
              fontWeight: 300,
            }}>
              Your note is with me. The next step is to pick a time.
            </p>
            <p style={{
              fontSize: 15,
              color: 'var(--c-steel-300)',
              lineHeight: 1.7,
              maxWidth: '52ch',
              margin: '0 auto 0',
              fontWeight: 300,
            }}>
              Choose a slot below. The call is 30 minutes, held in confidence, and held by me personally.
            </p>
          </Reveal>
        </div>
      </section>

      {/* Cal.com inline embed */}
      <section style={{ position: 'relative', paddingBottom: 80 }}>
        <div className="container" style={{ position: 'relative', zIndex: 2 }}>
          <Reveal delay={120}>
            <div style={{
              border: '1px solid var(--line)',
              background: 'rgba(255,255,255,0.012)',
              padding: 8,
              borderRadius: 4,
            }}>
              <iframe
                title="Book a discovery call with Daniel Pledger"
                src={calSrc}
                style={{
                  width: '100%',
                  minHeight: 760,
                  border: 0,
                  borderRadius: 2,
                  background: 'transparent',
                  display: 'block',
                }}
                allow="camera; microphone; fullscreen; payment"
              />
            </div>
            <p style={{
              fontSize: 12,
              letterSpacing: '0.22em',
              textTransform: 'uppercase',
              color: 'var(--c-slate-ocean)',
              fontWeight: 500,
              textAlign: 'center',
              marginTop: 20,
            }}>
              Times shown in your timezone · 30 minutes · Video call
            </p>
          </Reveal>
        </div>
      </section>

      {/* Quiet fallback / alternative path */}
      <section style={{ position: 'relative', paddingBottom: 120 }}>
        <div className="container-narrow" style={{ textAlign: 'center' }}>
          <Reveal delay={180}>
            <div style={{
              paddingTop: 40,
              borderTop: '1px solid var(--line)',
              display: 'flex',
              flexDirection: 'column',
              alignItems: 'center',
              gap: 22,
            }}>
              <p style={{
                fontSize: 15,
                color: 'var(--c-steel-300)',
                lineHeight: 1.7,
                maxWidth: '52ch',
                margin: 0,
                fontWeight: 300,
              }}>
                If nothing here fits, write to <InlineLink href="mailto:hello@pledgerspeaks.com">hello@pledgerspeaks.com</InlineLink> and I will find a time that does.
              </p>
              <div style={{ display: 'flex', gap: 18, justifyContent: 'center', flexWrap: 'wrap' }}>
                <Button variant="ghost" href="/">Return home</Button>
                <Button variant="text" href="/audit" noIcon>
                  <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
                    Take the audit while you wait
                    <i data-lucide="arrow-right" style={{ width: 12, height: 12 }} />
                  </span>
                </Button>
              </div>
            </div>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

/* ============================================================
   PERSPECTIVE — long-form positioning
   ============================================================ */
function PerspectivePage() {
  return (
    <div className="page-fade">
      <section style={{ position: 'relative', overflow: 'hidden', paddingTop: 160, paddingBottom: 80 }}>
        <Beam intensity={0.32} from="-8%" width="65%" sweep />
        <div className="container" style={{ position: 'relative', zIndex: 2 }}>
          <Reveal>
            <Eyebrow>Perspective</Eyebrow>
            <h1 style={{
              fontSize: 'clamp(40px, 5.4vw, 88px)',
              fontWeight: 600,
              lineHeight: 0.98,
              letterSpacing: '-0.035em',
              color: '#fff',
              margin: '28px 0 56px',
              textWrap: 'balance',
              maxWidth: '16ch',
            }}>
              I do not coach performance. I work on identity.
            </h1>
          </Reveal>

          <div style={{
            display: 'grid',
            gridTemplateColumns: '1fr 1.4fr',
            gap: 96,
            alignItems: 'start',
            marginTop: 40,
          }} data-asym="">
            <Reveal>
              <PortraitSlot label="grey blazer · standing · neutral" tone="cool" ratio="3 / 4" src="assets/images/perspective-daniel.jpg" />
              <div style={{
                marginTop: 18,
                fontSize: 10,
                letterSpacing: '0.24em',
                textTransform: 'uppercase',
                color: 'var(--c-slate-ocean)',
                fontWeight: 500,
              }}>Daniel Pledger · Bangalore</div>
            </Reveal>

            <Reveal delay={140}>
              <div className="col-regular">
                <p style={{ fontSize: 21, color: 'var(--c-steel-100)', lineHeight: 1.55, fontWeight: 300, margin: '0 0 36px' }}>
                  The leaders I work with do not need confidence training. They are already accomplished, accountable, and observable. They have outgrown the language that used to get them through the room.
                </p>

                <SectionHead>The premise.</SectionHead>
                <p>External authority can hide internal fragmentation. The room can read certainty in someone who has not yet read it in themselves. That mismatch is invisible for years, until a moment of real consequence asks it to hold.</p>
                <p>It does not hold. Or it holds, but pays for it privately. Both patterns are common at the senior level. Both are correctable. Neither responds to performance work.</p>

                <SectionHead>What this is not.</SectionHead>
                <p>It is not therapy. It is not personality testing. It is not journaling. It is not communication training. It is not media coaching. It is not motivation.</p>
                <p>It is a deliberate, structural conversation about identity under consequence. Conducted privately, between two adults, over months or in a single day.</p>

                <SectionHead>What it is.</SectionHead>
                <p>It is a working space for the senior leader who suspects, accurately, that something in their authority is leaking. Often before they can name where.</p>
                <p>The audit names where. The engagement repairs the structure underneath it.</p>

                <SectionHead>What the work looks like.</SectionHead>
                <p>It does not look like a workshop. It does not look like new language to memorise, or a posture to adopt. It looks like one private hour, every other week, where we name the specific room you are about to enter, the specific moment your authority usually slips, and the specific instinct you will rehearse to hold instead.</p>
                <p>Done deliberately across months, the version of you the room reads and the version of you that walks home stop arguing with each other. That is what changes. Not the language. The seat.</p>

                <div style={{ marginTop: 64 }}>
                  <PullQuote attribution="From the field, 2026">
                    The lighthouse is not rescue. It is signal.
                  </PullQuote>
                </div>

                <div style={{ marginTop: 64, display: 'flex', gap: 18, flexWrap: 'wrap' }}>
                  <Button variant="primary" href="/audit">Take the audit</Button>
                  <Button variant="ghost" href="/conversation">Request a conversation</Button>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>
    </div>
  );
}

function SectionHead({ children }) {
  return (
    <div style={{
      marginTop: 56,
      marginBottom: 18,
      paddingTop: 28,
      borderTop: '1px solid var(--line)',
      display: 'flex',
      alignItems: 'center',
      gap: 14,
    }}>
      <span className="thread-gold" />
      <span style={{ fontSize: 11, letterSpacing: '0.26em', textTransform: 'uppercase', color: 'var(--c-glow-500)', fontWeight: 500 }}>
        {children}
      </span>
    </div>
  );
}

// Style article-body paragraphs once
function ArticleParagraphStyle() {
  return (
    <style>{`
      .article-body p, .col-regular p {
        font-size: 17px;
        line-height: 1.72;
        color: var(--c-steel-100);
        font-weight: 300;
        margin: 0 0 22px;
        text-wrap: pretty;
      }
      .article-body p:first-child::first-letter {
        font-size: 1.4em;
        font-weight: 500;
        color: #fff;
      }
    `}</style>
  );
}

/* ============================================================
   SPEAKING
   ============================================================ */
function SpeakingPage() {
  return (
    <div className="page-fade">
      <section style={{ position: 'relative', overflow: 'hidden', paddingTop: 160, paddingBottom: 80 }}>
        <Beam intensity={0.4} from="-6%" width="75%" sweep />
        <div className="container" style={{ position: 'relative', zIndex: 2 }}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: '1.4fr 1fr',
            gap: 96,
            alignItems: 'end',
          }} data-asym="">
            <Reveal>
              <Eyebrow>Speaking · Selectively</Eyebrow>
              <h1 style={{
                fontSize: 'clamp(40px, 5.4vw, 88px)',
                fontWeight: 600,
                lineHeight: 0.98,
                letterSpacing: '-0.035em',
                color: '#fff',
                margin: '28px 0 28px',
                textWrap: 'balance',
                maxWidth: '16ch',
              }}>
                Closed-room conversations on authority under consequence.
              </h1>
              <p style={{
                fontSize: 19,
                color: 'var(--c-steel-300)',
                lineHeight: 1.55,
                fontWeight: 300,
                maxWidth: '48ch',
                margin: 0,
              }}>
                I speak rarely. When I do, it is to a senior, closed audience. Founder cohorts. Board offsites. Leadership intensives. The work does not translate to ballrooms.
              </p>
            </Reveal>
            <Reveal delay={120}>
              <ImageSlot label="lectern · low light · slate" tone="cool" ratio="5 / 6" src="assets/images/speaking-conviction.jpg" />
            </Reveal>
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <Reveal>
            <Eyebrow>Three sessions</Eyebrow>
            <h2 className="t-h2" style={{ marginTop: 18, marginBottom: 56, maxWidth: '24ch' }}>
              Each begins from the same premise.
            </h2>
          </Reveal>

          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            borderTop: '1px solid var(--line)',
          }} data-asym="">
            <Talk idx="01" duration="60 min · keynote" title="Identity Holding Under Pressure" desc="The structural reading of why authority leaks, where it leaks, and what holds it firm. Closed audiences only." />
            <Talk idx="02" duration="90 min · workshop" title="The Tempo of Composure" desc="A working session on pace, breath, and the listener's body. For senior teams entering a public moment." />
            <Talk idx="03" duration="Half day · intensive" title="Authority Embodied" desc="A small-group intensive for founders and CXOs. Identity work, structural feedback, real conversations." />
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--c-nightfall)', padding: 'calc(120px * var(--tdp-density)) 0' }}>
        <div className="container">
          <Reveal>
            <div style={{
              display: 'grid',
              gridTemplateColumns: '1fr 1.4fr',
              gap: 80,
              alignItems: 'center',
            }} data-asym="">
              <div>
                <Eyebrow>Recent rooms</Eyebrow>
                <h2 className="t-h2" style={{ marginTop: 18, marginBottom: 0, maxWidth: '14ch' }}>
                  Where the conversation has been.
                </h2>
              </div>
              <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 0 }}>
                {[
                  { date: '2026 · Sep', org: 'Founder cohort · Series C', loc: 'Bangalore' },
                  { date: '2026 · Jul', org: 'Board offsite · Listed financial', loc: 'Singapore' },
                  { date: '2026 · May', org: 'Leadership intensive · Industrial', loc: 'Mumbai' },
                  { date: '2026 · Mar', org: 'CXO summit · Closed', loc: 'Geneva' },
                ].map((r) => (
                  <li key={r.date} className="speaking-room" style={{
                    display: 'grid',
                    gridTemplateColumns: '160px 1fr 200px',
                    gap: 24,
                    padding: '22px 0',
                    borderBottom: '1px solid var(--line)',
                    alignItems: 'baseline',
                  }}>
                    <span style={{ fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--accent)', fontWeight: 500 }}>{r.date}</span>
                    <span style={{ fontSize: 17, color: '#fff', fontWeight: 400 }}>{r.org}</span>
                    <span className="speaking-room-loc" style={{ fontSize: 12, color: 'var(--c-steel-300)', letterSpacing: '0.08em', textAlign: 'right' }}>{r.loc}</span>
                  </li>
                ))}
              </ul>
            </div>
          </Reveal>
        </div>
      </section>

      <section className="section">
        <div className="container-narrow" style={{ textAlign: 'center' }}>
          <Reveal>
            <Eyebrow style={{ display: 'inline-block' }}>By inquiry</Eyebrow>
            <h2 style={{
              fontSize: 'clamp(36px, 4vw, 64px)',
              fontWeight: 500,
              letterSpacing: '-0.03em',
              color: '#fff',
              margin: '28px auto 36px',
              maxWidth: '22ch',
              textWrap: 'balance',
            }}>
              If the room is the right one, the conversation can be arranged.
            </h2>
            <Button variant="primary" href="/conversation" size="lg">Request the conversation</Button>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

function Talk({ idx, duration, title, desc }) {
  const [hover, setHover] = pState(false);
  return (
    <div
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        position: 'relative',
        padding: '36px 32px 36px',
        borderRight: '1px solid var(--line)',
        borderBottom: '1px solid var(--line)',
        display: 'flex',
        flexDirection: 'column',
        gap: 18,
        minHeight: 280,
        background: hover ? 'rgba(255,255,255,0.012)' : 'transparent',
        transition: 'background 280ms',
      }}>
      <div style={{ position: 'absolute', top: 0, left: 0, width: hover ? '50%' : 0, height: 2, background: 'var(--accent)', transition: 'width 480ms var(--ease-out)' }} />
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
        <Idx>{idx}</Idx>
        <span style={{ fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--accent)', fontWeight: 500 }}>{duration}</span>
      </div>
      <div style={{ fontSize: 'clamp(22px, 1.8vw, 28px)', fontWeight: 500, color: '#fff', letterSpacing: '-0.018em', lineHeight: 1.18 }}>{title}</div>
      <p style={{ fontSize: 14, color: 'var(--c-steel-300)', lineHeight: 1.6, margin: 0, fontWeight: 300, flex: 1 }}>{desc}</p>
    </div>
  );
}

/* ============================================================
   LEGAL — Privacy & Terms
   ============================================================ */
function LegalPage({ eyebrow, title, updated, intro, sections }) {
  return (
    <div className="page-fade">
      <ArticleParagraphStyle />
      <section style={{ position: 'relative', overflow: 'hidden', paddingTop: 160, paddingBottom: 60 }}>
        <Beam intensity={0.3} from="-6%" width="55%" sweep />
        <div className="container-narrow" style={{ position: 'relative', zIndex: 2 }}>
          <Reveal>
            <Eyebrow>{eyebrow}</Eyebrow>
            <h1 style={{
              fontSize: 'clamp(36px, 5vw, 76px)',
              fontWeight: 600,
              lineHeight: 1.02,
              letterSpacing: '-0.034em',
              color: '#fff',
              margin: '24px 0 20px',
              textWrap: 'balance',
            }}>{title}</h1>
            <p style={{ fontSize: 12, letterSpacing: '0.22em', textTransform: 'uppercase', color: 'var(--c-slate-ocean)', fontWeight: 500, margin: 0 }}>
              Last updated {updated}
            </p>
            {intro && (
              <p style={{ fontSize: 17, color: 'var(--c-steel-300)', fontWeight: 300, lineHeight: 1.65, marginTop: 28, maxWidth: '56ch' }}>{intro}</p>
            )}
          </Reveal>
        </div>
      </section>

      <section style={{ paddingBottom: 'calc(100px * var(--tdp-density))' }}>
        <div className="container-narrow" style={{ position: 'relative' }}>
          <Reveal>
            <div className="article-body" style={{ paddingTop: 56, borderTop: '1px solid var(--line)' }}>
              {sections.map((s, i) => (
                <React.Fragment key={i}>
                  <h2 style={{
                    fontSize: 'clamp(20px, 1.8vw, 26px)',
                    fontWeight: 500,
                    color: '#fff',
                    letterSpacing: '-0.02em',
                    lineHeight: 1.2,
                    margin: i === 0 ? '0 0 18px' : '48px 0 18px',
                    textWrap: 'balance',
                  }}>{s.title}</h2>
                  {s.body.map((p, j) => <p key={j}>{p}</p>)}
                </React.Fragment>
              ))}

              <div style={{ marginTop: 64, paddingTop: 32, borderTop: '1px solid var(--line)' }}>
                <Eyebrow>Questions</Eyebrow>
                <p style={{ fontSize: 17, color: 'var(--c-steel-300)', fontWeight: 300, lineHeight: 1.6, marginTop: 16, maxWidth: '52ch' }}>
                  For anything in this document, write to <InlineLink href="mailto:hello@pledgerspeaks.com">hello@pledgerspeaks.com</InlineLink>.
                </p>
              </div>
            </div>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

function PrivacyPage() {
  return (
    <LegalPage
      eyebrow="Privacy"
      title="Privacy Policy"
      updated="12 June 2026"
      intro="What is collected when you use this site, why, and how it is held."
      sections={[
        {
          title: 'Overview',
          body: [
            'This policy covers thedanielpledger.com — the site, its writing, the Executive Authority Signal Audit, and the conversation request form. It describes what is collected, why, and what happens to it. It does not cover third-party sites linked from here.',
          ],
        },
        {
          title: 'Information you provide',
          body: [
            'Requesting a conversation, completing the audit, or writing in directly may involve sharing your name, email address, role, company, and a written description of your situation. None of this is required simply to browse the site.',
          ],
        },
        {
          title: 'Information collected automatically',
          body: [
            'Standard technical information — browser type, device, approximate location from IP address, and pages visited — may be collected for security and to understand how the site is used. This site does not currently use advertising or tracking cookies.',
          ],
        },
        {
          title: 'How information is used',
          body: [
            'To respond to conversation requests and audit submissions personally, and to prepare for any engagement you choose to pursue.',
            'To understand, in aggregate and anonymised form, which parts of the site are useful.',
            'It is not sold, rented, or used for advertising, and it is not shared with any third party for their own marketing purposes.',
          ],
        },
        {
          title: 'Where information is held',
          body: [
            'Form submissions and audit responses are stored using reputable third-party infrastructure providers — for example, secure database and email-delivery services — acting under instruction. These providers have no right to use your information beyond providing that infrastructure.',
          ],
        },
        {
          title: 'Retention',
          body: [
            'Conversation requests and audit responses are kept for as long as is useful to the engagement they relate to, and are deleted on request.',
          ],
        },
        {
          title: 'Your rights',
          body: [
            'You can ask, at any time, to see what is held about you, to correct it, or to have it deleted. Write to hello@pledgerspeaks.com and this will be actioned within a reasonable period.',
          ],
        },
        {
          title: 'Security',
          body: [
            'Reasonable technical measures are used to protect information in transit and at rest. No system is perfectly secure, and information is shared at the sender’s own risk.',
          ],
        },
        {
          title: 'Children',
          body: [
            'This site is intended for working professionals and is not directed at children. Information from anyone known to be under 18 will be deleted on discovery.',
          ],
        },
        {
          title: 'Changes to this policy',
          body: [
            'This policy may be updated as the site and its services evolve. The date at the top reflects the most recent revision, and material changes will be reflected here before they take effect.',
          ],
        },
      ]}
    />
  );
}

function TermsPage() {
  return (
    <LegalPage
      eyebrow="Terms"
      title="Terms of Service"
      updated="12 June 2026"
      intro="The terms that apply to this site, its writing, and the audit. Coaching engagements themselves are agreed separately, in writing."
      sections={[
        {
          title: 'Acceptance',
          body: [
            'By using this site — browsing, completing the audit, or requesting a conversation — you accept these terms. If they do not work for you, the appropriate step is not to use the site.',
          ],
        },
        {
          title: 'What this is',
          body: [
            'thedanielpledger.com describes a private executive coaching and advisory practice. The writing, the audit, and the framing here are general in nature and reflect one practitioner’s perspective and method.',
          ],
        },
        {
          title: 'What this is not',
          body: [
            'Nothing on this site, including the Executive Authority Signal Audit, constitutes medical, psychological, legal, financial, or therapeutic advice, diagnosis, or treatment. The audit is a reflective tool, not a clinical instrument. If you need clinical or crisis support, please contact a licensed professional in your jurisdiction.',
          ],
        },
        {
          title: 'Engagements',
          body: [
            'Coaching engagements are separate from this site and are agreed individually, in writing, between Daniel Pledger and the client — including scope, fees, and confidentiality. Nothing on this site is an offer capable of acceptance. It is an invitation to start a conversation.',
          ],
        },
        {
          title: 'Use of the site',
          body: [
            'You agree to use this site lawfully, and not to attempt to disrupt it, scrape it at scale, or misrepresent your identity in any form submission.',
          ],
        },
        {
          title: 'Intellectual property',
          body: [
            'The text, design, and frameworks on this site — including the Executive Authority Signal Audit and its signatures — belong to Daniel Pledger. They may be referenced with attribution but not reproduced commercially without permission.',
          ],
        },
        {
          title: 'No guarantee of outcomes',
          body: [
            'Coaching outcomes depend on the client’s own work and circumstances. Nothing on this site should be read as a promise of a specific result.',
          ],
        },
        {
          title: 'Limitation of liability',
          body: [
            'This site and its content are provided as-is. To the fullest extent permitted by law, liability for any loss arising from use of this site or reliance on its content is excluded.',
          ],
        },
        {
          title: 'Governing law',
          body: [
            'These terms are governed by the laws of India. Any dispute relating to this site is subject to the jurisdiction of the courts of Bangalore, Karnataka.',
          ],
        },
        {
          title: 'Changes to these terms',
          body: [
            'These terms may be updated from time to time. Continued use of the site after a change constitutes acceptance of the revised terms.',
          ],
        },
      ]}
    />
  );
}

/* ============================================================
   COACHING INQUIRY
   ============================================================ */
function CoachingPage() {
  const [form, setForm] = pState({
    name: '', email: '', company: '', role: '',
    coachingType: 'executive', // 'od' or 'executive'
    coachingFocus: '', // sub-category
    situation: '', context: '', urgency: 'measured', linkedin: '',
  });
  const [submitted, setSubmitted] = pState(false);
  const [submitting, setSubmitting] = pState(false);
  const [error, setError] = pState(null);
  const [bookedTime, setBookedTime] = pState(null);
  const loadedAt = pMemo(() => Date.now(), []);
  const set = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  // Sub-options based on coaching type
  const focusOptions = form.coachingType === 'od' ? [
    { value: 'teams', label: 'Build high-performing teams' },
    { value: 'processes', label: 'Design processes and systems' },
    { value: 'culture', label: 'Develop organizational culture' },
    { value: 'leadership-capability', label: 'Leadership capability building' },
    { value: 'change', label: 'Change management and transformation' },
    { value: 'other-od', label: 'Other (describe below)' },
  ] : [
    { value: 'presence', label: 'General executive presence and authority' },
    { value: 'career-growth', label: 'Career growth and next-level readiness' },
    { value: 'wholistic', label: 'Wholistic leadership development' },
    { value: 'transitions', label: 'Coaching through transitions' },
    { value: 'pressure', label: 'Authority under pressure' },
    { value: 'other-exec', label: 'Other (describe below)' },
  ];

  const submit = (e) => {
    e.preventDefault();
    setSubmitting(true);
    setError(null);
    // On form submit, send to API and show calendar picker
    fetch('/api/coaching-inquiry.php', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ ...form, website: '', ts: loadedAt }),
    })
      .then((res) => res.json())
      .then((data) => {
        setSubmitting(false);
        if (data && data.ok) {
          setSubmitted(true);
        } else {
          setError('Something went wrong. Please try again, or email support@danielpledger.com directly.');
        }
      })
      .catch(() => {
        setSubmitting(false);
        setError('Something went wrong. Please try again, or email support@danielpledger.com directly.');
      });
  };

  if (submitted) return <CoachingReceived form={form} />;

  return (
    <div className="page-fade">
      <section style={{
        position: 'relative', overflow: 'hidden',
        paddingTop: 160, paddingBottom: 60,
      }}>
        <Beam intensity={0.4} from="-8%" width="65%" sweep />
        <div className="container" style={{ position: 'relative', zIndex: 2, display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 96 }} data-asym="">
          <Reveal>
            <Eyebrow>Coaching</Eyebrow>
            <div className="thread-gold" style={{ marginTop: 24, marginBottom: 28 }} />
            <h1 className="t-h1" style={{
              fontSize: 'clamp(36px, 4.4vw, 60px)',
              fontWeight: 500,
              lineHeight: 1.04,
              letterSpacing: '-0.028em',
              color: '#fff',
              margin: '0 0 32px',
              textWrap: 'balance',
              maxWidth: '16ch',
            }}>
              Let's explore the fit.
            </h1>
            <p style={{
              fontSize: 16,
              color: 'var(--c-steel-300)',
              lineHeight: 1.65,
              fontWeight: 300,
              maxWidth: '42ch',
              margin: '0 0 28px',
            }}>
              The intake form below helps me understand your situation before we talk. Your answers are the foundation of a good discovery conversation.
            </p>
            <p style={{
              fontSize: 14,
              color: 'var(--c-steel-300)',
              lineHeight: 1.65,
              fontWeight: 300,
              maxWidth: '42ch',
              margin: '0 0 32px',
            }}>
              I read every submission. You'll hear back within 2 business days with a calendar link to schedule your 45-minute discovery call.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 12, fontSize: 11, color: 'var(--c-slate-ocean)', letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 500 }}>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                <span style={{ color: 'var(--accent)', marginTop: 2 }}>✓</span>
                <span>Confidential intake</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                <span style={{ color: 'var(--accent)', marginTop: 2 }}>✓</span>
                <span>No obligation</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12 }}>
                <span style={{ color: 'var(--accent)', marginTop: 2 }}>✓</span>
                <span>Personal response</span>
              </div>
            </div>
          </Reveal>

          <Reveal delay={140}>
            <form onSubmit={submit} style={{
              border: '1px solid var(--line)',
              padding: '40px 36px 36px',
              background: 'rgba(255,255,255,0.012)',
              display: 'flex', flexDirection: 'column', gap: 28,
            }}>
              <FormField label="Full name" required>
                <input className="input" autoFocus required value={form.name}
                       onChange={set('name')} />
              </FormField>
              <FormField label="Email" required>
                <input className="input" type="email" required value={form.email}
                       onChange={set('email')} />
              </FormField>
              <FormField label="Company" required>
                <input className="input" required value={form.company}
                       onChange={set('company')} />
              </FormField>
              <FormField label="Role / Title" required>
                <input className="input" required value={form.role}
                       onChange={set('role')} />
              </FormField>
              <FormField label="What type of coaching are you seeking?" required>
                <select className="input" value={form.coachingType} onChange={set('coachingType')} style={{ paddingRight: 32 }}>
                  <option value="executive">Executive 1:1 Coaching</option>
                  <option value="od">OD (Organizational Development) Coaching</option>
                </select>
              </FormField>
              <FormField label={form.coachingType === 'od' ? 'OD focus area' : 'Executive coaching focus'} required>
                <select className="input" value={form.coachingFocus} onChange={set('coachingFocus')} style={{ paddingRight: 32 }}>
                  <option value="">Select a focus area</option>
                  {focusOptions.map(opt => (
                    <option key={opt.value} value={opt.value}>{opt.label}</option>
                  ))}
                </select>
              </FormField>
              <FormField label="Current situation — what's the challenge you're navigating?" required>
                <textarea className="input" required value={form.situation}
                          onChange={set('situation')} style={{ minHeight: 100, fontFamily: 'inherit' }} />
              </FormField>
              <FormField label="Tell us more about what you're looking for (optional)">
                <textarea className="input" value={form.context}
                          onChange={set('context')} style={{ minHeight: 80, fontFamily: 'inherit' }} />
              </FormField>
              <FormField label="Timeframe">
                <select className="input" value={form.urgency} onChange={set('urgency')} style={{ paddingRight: 32 }}>
                  <option value="now">Within 2 weeks (urgent)</option>
                  <option value="measured">Within a quarter</option>
                  <option value="exploring">Exploring (no timeline)</option>
                </select>
              </FormField>
              <FormField label="LinkedIn profile (optional)">
                <input className="input" type="text" value={form.linkedin}
                       onChange={set('linkedin')} placeholder="linkedin.com/in/yourprofile" />
              </FormField>
              <div style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'space-between',
                paddingTop: 8,
                gap: 18,
              }}>
                <span style={{
                  fontSize: 11,
                  letterSpacing: '0.22em',
                  textTransform: 'uppercase',
                  color: 'var(--c-slate-ocean)',
                  fontWeight: 500,
                }}>
                  Submit · book
                </span>
                <Button variant="primary" type="submit" disabled={submitting}>
                  {submitting ? 'Sending…' : 'Submit intake'}
                </Button>
              </div>
              {error && (
                <p style={{ fontSize: 13, color: 'var(--c-rose-400, #f87171)', margin: 0 }}>{error}</p>
              )}
            </form>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

function CoachingReceived({ form }) {
  const firstName = (form && form.name) ? form.name.split(/\s+/)[0] : 'there';
  return (
    <div className="page-fade">
      <section style={{
        position: 'relative',
        overflow: 'hidden',
        paddingTop: 160,
        paddingBottom: 60,
      }}>
        <Beam intensity={0.35} from="-12%" width="90%" angle={-7} sweep />
        <div className="container-narrow" style={{ position: 'relative', zIndex: 2 }}>
          <Reveal>
            <Eyebrow style={{ display: 'inline-block' }}>Book your call</Eyebrow>
            <div className="thread-gold" style={{ margin: '28px auto 36px' }} />
            <h1 style={{
              fontSize: 'clamp(40px, 5vw, 76px)',
              fontWeight: 500,
              lineHeight: 1.04,
              letterSpacing: '-0.03em',
              color: '#fff',
              margin: '0 auto 28px',
              textWrap: 'balance',
              maxWidth: '20ch',
              textAlign: 'center',
            }}>
              Pick your time, {firstName}.
            </h1>
            <p style={{
              fontSize: 16,
              color: 'var(--c-steel-300)',
              lineHeight: 1.65,
              textAlign: 'center',
              maxWidth: '52ch',
              margin: '0 auto 48px',
            }}>
              Select a 45-minute slot below that works for you. I'll send a confirmation to {form.email}.
            </p>
          </Reveal>

          <Reveal delay={140}>
            <div style={{
              border: '1px solid var(--line)',
              borderRadius: 12,
              padding: '40px',
              background: 'rgba(255,255,255,0.008)',
              minHeight: 600,
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
            }}>
              <iframe
                src="https://cal.com/daniel-pledger-wqrojx/discovery?embed=true&layout=month"
                style={{
                  width: '100%',
                  height: 600,
                  border: 'none',
                  borderRadius: 8,
                }}
                frameBorder="0"
              />
            </div>
          </Reveal>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, {
  HomePage, ConversationPage, CoachingPage, PerspectivePage, SpeakingPage,
  ArticleParagraphStyle, PrivacyPage, TermsPage, FormField,
});
