// Home page sections — built from data in components.jsx

function HeroHome() {
  return (
    <section className="hero" id="home" data-screen-label="Home Hero">
      <div className="hero__bg">
        <img src="img/photo/altin-ferreira-YP9GN7A3m3k-unsplash.jpg" alt="" loading="eager" />
        <div className="hero__credit">Photo · Altin Ferreira</div>
      </div>
      <div className="wrap hero__inner">
        <div className="hero__meta">
          <span>CoreBridge Advisory</span>
          <span>Strategy · Governance · Growth</span>
          <span>Australia · Asia–Pacific · UK</span>
        </div>
        <AnimatedTitle>{[
          { text: "Where vision meets ", em: false },
          { text: "institutional clarity.", em: true }
        ]}</AnimatedTitle>
        <p className="hero__lede">
          A boutique advisory partnering with universities, government agencies, and purpose-driven organisations to navigate complexity, design bold strategies, and deliver outcomes that endure.
        </p>
        <div className="hero__cta">
          <a className="cta-pill" href="#contact"><span>Start a conversation</span><ArrowRight /></a>
          <a className="btn-line" href="#practices" style={{ color: "var(--paper)" }}>
            <span>How we work</span>
            <svg className="btn-line__arrow" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </a>
        </div>
      </div>
      <div className="hero__scroll" aria-hidden="true">
        <span>Scroll</span>
        <span className="hero__scroll-line" />
      </div>
    </section>
  );
}

function AboutBlock() {
  return (
    <section className="section" id="about" data-screen-label="About">
      <div className="wrap two-col">
        <div className="two-col__head">
          <Reveal><div className="eyebrow-chip">— §01 / About</div></Reveal>
          <Reveal delay={80}><h2 className="display-2" style={{ marginTop: 16 }}>Built on <em>institutional</em> leadership.</h2></Reveal>
        </div>
        <div className="two-col__body">
          <Reveal delay={120}>
            <p className="lede">
              CoreBridge Advisory was founded by Benjie‑Etta Norman, drawing on more than 20 years of executive experience across higher education, government, health, and institutional transformation.
            </p>
          </Reveal>
          <Reveal delay={180}>
            <div className="body">
              <p>We partner with universities, government agencies, peak bodies, and purpose-driven organisations across Australia, the Asia–Pacific, and the United Kingdom to navigate complexity, design bold strategies, and deliver outcomes that endure.</p>
              <p>We work at the intersection of strategy, governance, and growth — helping leaders make decisions that shape institutions for decades. Our curated network of senior advisors brings together some of Australia's and New Zealand's most respected voices in education, health, policy, and public leadership.</p>
            </div>
          </Reveal>
          <Reveal delay={240}>
            <div className="callout">
              <div>
                <div className="callout__eyebrow">— Founding Principle</div>
                <h3 className="callout__title">Senior in <em>the room</em>.</h3>
              </div>
              <div className="callout__body">
                Every CoreBridge engagement is shaped and delivered by senior practitioners who have led institutions, shaped national policy, and built strategies from the inside. The people in the room at the start are the people in the room at the end.
              </div>
            </div>
          </Reveal>
          <Reveal delay={300}>
            <div className="principles">
              <div className="principle">
                <div className="principle__num">01</div>
                <div>
                  <div className="h3" style={{ marginBottom: 8 }}>Deliberately boutique.</div>
                  <div className="body">We limit the number of engagements we take on at any time. It's the reason our clients trust us with their most consequential decisions.</div>
                </div>
              </div>
              <div className="principle">
                <div className="principle__num">02</div>
                <div>
                  <div className="h3" style={{ marginBottom: 8 }}>Outcomes that endure.</div>
                  <div className="body">We design for the decade after the engagement, not the quarter after the report. Strategy, governance, and growth — built to last.</div>
                </div>
              </div>
            </div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

function PracticesBlock() {
  return (
    <section className="section section--paper-2" id="practices" data-screen-label="Practices">
      <div className="wrap">
        <Reveal><div className="eyebrow-chip">— §02 / Practices</div></Reveal>
        <Reveal delay={80}><h2 className="display-2" style={{ marginTop: 16, maxWidth: "16ch" }}>Three practices, <em>one</em> integrated approach.</h2></Reveal>
        <Reveal delay={140}>
          <p className="lede" style={{ marginTop: 24, maxWidth: "60ch" }}>
            Every engagement is shaped by deep sector knowledge, analytical rigour, and a commitment to outcomes that endure beyond the project.
          </p>
        </Reveal>
        <div className="practices">
          {PRACTICES.map((p, i) => {
            const variant = ["paper", "wash", "dark"][i % 3];
            return (
              <Reveal key={p.num} delay={i * 80}>
                <div className={"practice practice--" + variant}>
                  <div className="practice__num">— {p.num}</div>
                  <h3 className="practice__title">{p.title}</h3>
                  <div className="practice__body">{p.body}</div>
                </div>
              </Reveal>
            );
          })}
        </div>
      </div>
    </section>
  );
}

function ImpactBlock() {
  return (
    <section className="section" id="impact" data-screen-label="Impact">
      <div className="wrap">
        <Reveal><div className="eyebrow-chip">— §03 / Impact</div></Reveal>
        <Reveal delay={80}><h2 className="display-2" style={{ marginTop: 16, maxWidth: "18ch" }}>Outcomes that <em>shape</em> institutions.</h2></Reveal>
        <Reveal delay={140}>
          <p className="lede" style={{ marginTop: 24, maxWidth: "60ch" }}>
            A selection of recent engagements across strategy, governance, and institutional transformation.
          </p>
        </Reveal>
        <div className="impact-list">
          {IMPACT.map((it, i) => (
            <Reveal key={it.num} delay={i * 60}>
              <div className="impact">
                <div className="impact__num">— {it.num}</div>
                <h3 className="impact__title">{it.title}</h3>
                <div className="impact__body">{it.body}</div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function TrustedBlock() {
  return (
    <section className="section section--ink" id="trusted" data-screen-label="Trusted">
      <div className="wrap">
        <Reveal><div className="eyebrow-chip">— §04 / Trusted</div></Reveal>
        <Reveal delay={80}><h2 className="display-2" style={{ marginTop: 16, maxWidth: "20ch", color: "var(--paper)" }}>Working with leading institutions and organisations.</h2></Reveal>
        <Reveal delay={140}>
          <div className="logo-grid">
            <div className="logo-cell"><img src="img/logos/melbourne.png" alt="The University of Melbourne" loading="lazy" /></div>
            <div className="logo-cell"><img src="img/logos/anu.png" alt="Australian National University" loading="lazy" /></div>
            <div className="logo-cell"><img src="img/logos/deakin.png" alt="Deakin University" loading="lazy" /></div>
            <div className="logo-cell"><img src="img/logos/acu.png" alt="Australian Catholic University" loading="lazy" /></div>
            <div className="logo-cell"><img src="img/logos/newcastle.png" alt="Newcastle University" loading="lazy" /></div>
            <div className="logo-cell"><img src="img/logos/ecu.png" alt="Edith Cowan University" loading="lazy" /></div>
            <div className="logo-cell"><img src="img/logos/anu-nsc.png" alt="ANU National Security College" loading="lazy" /></div>
            <div className="logo-cell"><img src="img/logos/deakin-iht.png" alt="Deakin Institute for Health Transformation" loading="lazy" /></div>
            <div className="logo-cell"><img src="img/logos/deakin-lifespan.png" alt="Deakin Lifespan Institute" loading="lazy" /></div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function TeamBlock() {
  return (
    <section className="section" id="team" data-screen-label="Team">
      <div className="wrap">
        <Reveal><div className="eyebrow-chip">— §05 / Team</div></Reveal>
        <Reveal delay={80}><h2 className="display-2" style={{ marginTop: 16, maxWidth: "20ch" }}>Senior advisors with <em>institutional</em> depth.</h2></Reveal>
        <Reveal delay={140}>
          <p className="lede" style={{ marginTop: 24, maxWidth: "64ch" }}>
            Our curated network brings together practitioners who have led institutions, shaped national policy, rebuilt workforce systems, and advised at the highest levels of government and higher education — delivering practical, real-world transformation.
          </p>
        </Reveal>
        <div className="team-grid">
          {TEAM.map((m, i) => (
            <Reveal key={m.id} delay={(i % 3) * 80}>
              <MemberCard m={m} />
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function LeadershipEvolutionBlock() {
  return (
    <section className="section section--paper-2" id="leadership" data-screen-label="Leadership Evolution">
      <div className="wrap">
        <div className="two-col">
          <div className="two-col__head">
            <Reveal><div className="eyebrow-chip">— §06 / Leadership Evolution</div></Reveal>
            <Reveal delay={80}><h2 className="display-2" style={{ marginTop: 16 }}>How institutions <em>lead</em> from the inside out.</h2></Reveal>
          </div>
          <div className="two-col__body">
            <Reveal delay={120}>
              <p className="lede">
                Our flagship leadership intensive — designed and led with Ray Lind ONZM and The Hon. Dame Annette King — builds shared purpose, strengthens decision-making, and supports senior leaders to navigate complexity with confidence.
              </p>
            </Reveal>
            <Reveal delay={180}>
              <div className="frameworks">
                <div className="framework">
                  <div className="framework__num">i</div>
                  <h3 className="framework__title">Identity-informed leadership</h3>
                  <div className="framework__body">Leadership built on who you are and where you sit in the system — not just what you do.</div>
                </div>
                <div className="framework">
                  <div className="framework__num">ii</div>
                  <h3 className="framework__title">Operational trust</h3>
                  <div className="framework__body">Decision-making, delegation, and reform built on disciplined trust between executive layers.</div>
                </div>
                <div className="framework">
                  <div className="framework__num">iii</div>
                  <h3 className="framework__title">Succession & mentoring</h3>
                  <div className="framework__body">Building the next layer of leadership before you need it. Honest, contextual, hands-on.</div>
                </div>
                <div className="framework">
                  <div className="framework__num">iv</div>
                  <h3 className="framework__title">Governance under pressure</h3>
                  <div className="framework__body">Calm strength and clarity — drawing on lived political and institutional experience.</div>
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

function PhilosophyBlock() {
  return (
    <section className="section section--ink" id="philosophy" data-screen-label="Philosophy">
      <div className="wrap">
        <div className="two-col">
          <div className="two-col__head">
            <Reveal><div className="eyebrow-chip">— §07 / Philosophy</div></Reveal>
            <Reveal delay={80}><h2 className="display-2" style={{ marginTop: 16, color: "var(--paper)" }}>Strategy is a <em>discipline</em> of judgement.</h2></Reveal>
          </div>
          <div className="two-col__body">
            <Reveal delay={120}>
              <p className="pullquote">
                We believe the best institutions are <em>built, not branded</em> — shaped by the quiet discipline of clear thinking, honest evidence, and the courage to make consequential decisions in public.
              </p>
            </Reveal>
            <Reveal delay={160}>
              <div className="ip-intro">
                <div className="ip-intro__kicker">— Three integrated instruments</div>
                <p className="ip-intro__lede">
                  Three pieces of proprietary IP — no peer firm has equivalents. They open every engagement, thread the analysis, and close the recommendation. <em>Load-bearing, not chapter headings.</em>
                </p>
              </div>
            </Reveal>
          </div>
        </div>

        <Reveal delay={220}>
          <div className="ip-set">
            <article className="ip-card">
              <div className="ip-card__roman">i</div>
              <div className="ip-card__kicker">— Diagnostic</div>
              <h3 className="ip-card__title">Governance Tension Framework</h3>
              <p className="ip-card__lede">A diagnostic instrument for public-purpose decisions. Trust at the centre; three forces pulling against it.</p>
              <ul className="ip-card__list">
                <li><span className="ip-card__list-key">External Environment</span><span className="ip-card__list-val">political, regulatory, funding weather</span></li>
                <li><span className="ip-card__list-key">Community Voice</span><span className="ip-card__list-val">claim of those the institution serves</span></li>
                <li><span className="ip-card__list-key">Best Practice</span><span className="ip-card__list-val">accumulated discipline of the craft</span></li>
              </ul>
              <div className="ip-card__foot"><em>"A board that cannot hold all three in tension has already chosen which one to lose."</em></div>
            </article>

            <article className="ip-card ip-card--accent">
              <div className="ip-card__roman">ii</div>
              <div className="ip-card__kicker">— Horizon</div>
              <h3 className="ip-card__title">Twenty-Year Horizon</h3>
              <p className="ip-card__lede">A purpose-articulation discipline. What the institution exists to make true in the world by 2046 — used to reframe everything happening now.</p>
              <ul className="ip-card__list">
                <li><span className="ip-card__list-key">The absence test</span><span className="ip-card__list-val">success means the structures built to advance the purpose are no longer needed in their current form</span></li>
                <li><span className="ip-card__list-key">Institutional specificity</span><span className="ip-card__list-val">a horizon for <em>this</em> institution, not for the sector</span></li>
                <li><span className="ip-card__list-key">Inheritance</span><span className="ip-card__list-val">written for those who will inherit the work, not those who hold it now</span></li>
              </ul>
              <div className="ip-card__foot"><em>A re-legitimisation instrument for institutions losing social licence.</em></div>
            </article>

            <article className="ip-card">
              <div className="ip-card__roman">iii</div>
              <div className="ip-card__kicker">— Sustainability</div>
              <h3 className="ip-card__title">Sustainability Frame</h3>
              <p className="ip-card__lede">A multi-dimensional reframe of the financial case. Replaces the standalone financial case in CoreBridge documents — finance is one dimension among eight.</p>
              <ul className="ip-card__list ip-card__list--grid">
                <li>Financial</li><li>Mission</li>
                <li>Reputational</li><li>Capability</li>
                <li>Partnership</li><li>Social licence</li>
                <li>Regulatory</li><li>Workforce</li>
              </ul>
              <div className="ip-card__verdict">
                <span className="ip-card__verdict-label">Four-mode verdict</span>
                <div className="ip-card__verdict-row">
                  <span>Sustained</span>
                  <span>Mission-sustained loss-leader</span>
                  <span>Financially-sustained drift</span>
                  <span>Insufficient</span>
                </div>
              </div>
            </article>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function PerspectivesBlock() {
  const posts = POSTS.slice(0, 3);
  return (
    <section className="section" id="perspectives" data-screen-label="Perspectives">
      <div className="wrap">
        <Reveal><div className="eyebrow-chip">— §08 / Perspectives</div></Reveal>
        <Reveal delay={80}><h2 className="display-2" style={{ marginTop: 16, maxWidth: "20ch" }}>Working <em>papers</em>, not press releases.</h2></Reveal>
        <Reveal delay={140}><p className="lede" style={{ marginTop: 24, maxWidth: "60ch" }}>Long-form thinking from the CoreBridge advisory team on governance, strategy, and the institutions that shape public life.</p></Reveal>
        <div className="posts">
          {posts.map((p, i) => {
            const variant = ["paper", "wash", "dark"][i % 3];
            return (
              <Reveal key={i} delay={(i % 3) * 80}>
                <a className={"post post--" + variant} href={"blog.html#" + p.slug}>
                  <div className="post__meta"><span>{p.tag}</span><span>{p.readTime}</span></div>
                  <h3 className="post__title">{p.title}</h3>
                  <div className="post__excerpt">{p.excerpt}</div>
                  <div className="post__cta"><span>Read paper</span><ArrowRight /></div>
                </a>
              </Reveal>
            );
          })}
        </div>
        <Reveal delay={300}>
          <div style={{ marginTop: "clamp(40px, 5vw, 64px)", display: "flex", justifyContent: "flex-end" }}>
            <a href="blog.html" className="view-all-link">
              <span>View all perspectives</span>
              <ArrowRight />
            </a>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function ContactBlock() {
  return (
    <section className="contact-cta" id="contact" data-screen-label="Contact">
      <div className="wrap">
        <Reveal><div className="eyebrow-chip">— §09 / Contact</div></Reveal>
        <Reveal delay={80}><h2 className="contact-cta__title" style={{ marginTop: 16 }}>Ready to shape <em>what's next?</em></h2></Reveal>
        <Reveal delay={140}><p className="contact-cta__lede">Whether you're navigating organisational transformation, designing a new strategy, or investing in your leadership team — we'd welcome the conversation.</p></Reveal>
        <Reveal delay={200}>
          <a className="contact-cta__email" href="mailto:benjie@corebridgeadvisory.com.au">
            <span>benjie@corebridgeadvisory.com.au</span>
            <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M3 10h14M12 5l5 5-5 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" /></svg>
          </a>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, {
  HeroHome, AboutBlock, PracticesBlock, ImpactBlock, TrustedBlock,
  TeamBlock, LeadershipEvolutionBlock, PhilosophyBlock,
  PerspectivesBlock, ContactBlock
});