// =============================================================================
// Astovia · Service pages — Advisory, Interim, Transformation
// =============================================================================

function PageHeader({ num, title, tagline, lede, accent = 'bronze' }) {
  return (
    <section className="page-header" data-screen-label={`${title} · header`}>
      <div className="container">
        <div className="two-col" style={{ alignItems: 'end' }}>
          <h1>{title}<span className="serif-em">.</span></h1>
          <div>
            <div className="tagline">"{tagline}"</div>
            <p className="lede">{lede}</p>
          </div>
        </div>
      </div>
    </section>);

}

function PageFigure({ src, alt }) {
  return (
    <section className="section section--narrow" data-screen-label="Figure" style={{ paddingTop: 0 }}>
      <div className="container">
        <div className="photo" style={{ aspectRatio: '21/9' }}>
          <img src={src} alt={alt} loading="lazy" />
        </div>
      </div>
    </section>);

}

function Dossier({ num, title, rows }) {
  return (
    <div className="dossier">
      <div className="dossier-title">
        <h3>{title}</h3>
      </div>
      <div className="dossier-rows">
        {rows.map(([k, v]) =>
        <div className="dossier-row" key={k}>
            <div className="label">{k}</div>
            <div className="copy" style={{ fontSize: 17 }}>{v}</div>
          </div>
        )}
      </div>
    </div>);

}

function PillarsSection({ eyebrow, headline, headlineEm, intro, pillars }) {
  return (
    <section className="section" data-screen-label={headline}>
      <div className="container">
        {(headline || headlineEm) &&
        <div className="section-head">
          <div>
            <h2>
              {headline}{headlineEm ? ' ' : ''}{headlineEm && <span className="serif-em">{headlineEm}</span>}
            </h2>
          </div>
          {intro && <p>{intro}</p>}
        </div>}
        <div>
          {pillars.map((p, i) => <Dossier key={p.title} num={String(i + 1).padStart(2, '0')} title={p.title} rows={p.rows} />
          )}
        </div>
      </div>
    </section>);

}

function HowWeWorkCallout({ items }) {
  return (
    <section className="section section--narrow" data-screen-label="How we work together">
      <div className="container">
        <div className="callout">
          <div>
            <div className="label"></div>
            <h3>How we work together</h3>
          </div>
          <div>
            {items.map((it, i) => <p key={i}>{it}</p>)}
          </div>
        </div>
      </div>
    </section>);

}

function WhyThisWorks({ eyebrow, headline, headlineEm, body }) {
  return (
    <section className="section" data-screen-label="Why this works">
      <div className="container">
        <div className="two-col reverse">
          <div>
            <h2 style={{ fontFamily: 'var(--font-sans)', fontWeight: 300, fontSize: 'clamp(36px, 5vw, 60px)', letterSpacing: '-0.03em', margin: 0, lineHeight: 1.0, color: 'var(--paper)' }}>
              {headline}{headlineEm ? ' ' : ''}{headlineEm && <span className="serif-em">{headlineEm}</span>}
            </h2>
          </div>
          <div>
            {body.map((p, i) =>
            <p key={i} style={{ fontSize: 16, color: 'var(--paper-70)', lineHeight: 1.7, margin: '0 0 18px' }}>{p}</p>
            )}
          </div>
        </div>
      </div>
    </section>);

}

function CuriousCta({ go }) {
  return (
    <section className="final-cta" data-screen-label="Curious CTA">
      <div className="container">
        <div className="inner">
          <div>
            <div className="eyebrow" style={{ marginBottom: 28 }}></div>
            <h2>Curious<span className="serif-em">?</span></h2>
          </div>
          <div>
            <p>


            </p>
            <a className="btn btn-primary btn-block" onClick={() => go('contact')}>Get in touch</a>
          </div>
        </div>
      </div>
    </section>);

}

// -----------------------------------------------------------------------------
// Advisory
// -----------------------------------------------------------------------------
function AdvisoryPage({ go }) {
  return (
    <main data-screen-label="Advisory">
      <PageHeader
        num="02"
        title="Startup Advisory"
        tagline="Scale without stumbling."
        lede="You've proven product-market fit. Now the hard part: scaling fast without breaking what works — or breaking the bank. We jointly design, implement, and measure the next steps that work for you." />

      <PageFigure
        src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?w=2000&q=80"
        alt="Founders mapping a strategy on a whiteboard" />

      <PillarsSection
        eyebrow="01 · Three pillars of the work"
        headline=""
        headlineEm=""
        intro={null}
        pillars={[
        { title: 'Go-To-Market Strategy', rows: [
          ['Challenge', `You've launched one way to sell — and things are changing: the market, the team, or your capital situation.`],
          ['Solution', `We audit your model and redesign it, aligned with where you are going.`],
          ['Impact', `A sales process that scales with your growth and your situation — before you need to hire expensive leaders.`]]
        },
        { title: 'Operational Execution', rows: [
          ['Challenge', `You started with a small team. Things were fast and obvious. The team has grown, things are slower and take more effort.`],
          ['Solution', `We apply learnings from decades of global leadership and define processes that don't break the bank and keep you nimble.`],
          ['Impact', `Operations that scale smoothly. Teams can execute. Customers are delighted.`]]
        },
        { title: 'Team Routines and Leadership', rows: [
          ['Challenge', `You built something great. Work has gotten more complex, scale is hard, burnout is on the horizon.`],
          ['Solution', `We establish structured rituals, goals and feedback loops that create clarity and retain your people.`],
          ['Impact', `Less thrash. Teams collaborate with fun and clarity on their mission. Lower attrition.`]]
        }]
        } />
      
      <HowWeWorkCallout items={[
      "Every founder's journey is different. We flex the engagement to match where you are:",
      "Monthly advisory retainer · Equity participation · Project-based deep-dives · Fractional leadership roles."]
      } />
      <WhyThisWorks
        eyebrow="04 · Why this works"
        headline="Why this works"
        headlineEm=""
        body={[
        "I spent 30 years at Hewlett-Packard enabling Go-To-Market models, operational systems, and teams that ranged from super small to 2 500 people.",
        "I've managed $1B+ budgets. I've made the mistakes. I know which approaches work and which ones waste time.",
        "Now I apply those lessons to help the next generation of founders."]
        } />
      
      <CuriousCta go={go} />
    </main>);

}

// -----------------------------------------------------------------------------
// Interim
// -----------------------------------------------------------------------------
function InterimPage({ go }) {
  return (
    <main data-screen-label="Interim">
      <PageHeader
        num="03"
        title="Interim Management"
        tagline="Leadership, right now. Without the overhead"
        lede="Get a COO, VP Revenue Ops, Customer Service & Success, or Chief Transformation Officer. Fractional or fulltime." />

      <PageFigure
        src="https://images.unsplash.com/photo-1517502884422-41eaead166d4?w=2000&q=80"
        alt="A quiet executive desk awaiting its operator" />

      <PillarsSection
        eyebrow="01 · The interim mandate"
        headline=""
        headlineEm=""
        intro=""
        pillars={[
        { title: 'Leadership Domain Expertise', rows: [
          ['Scope', `15 years at Fortune 100 VP level. Sales, Revenue & Customer Ops. Digital Engagement. Transformation Management. 2500+ people.`],
          ['What we do', `Stabilize or Transform. Replatform for scale. Handover to permanent leadership when you're ready.`],
          ['Outcome', `Immediate leadership stability. Continuity in growth or transformation. You get breathing room to lead the vision.`]]
        },
        { title: 'Flexible Engagement Models', rows: [
          ['Scope', `Some companies need full-time execution, others just 20 hours/week fractional guidance. We flex so it works for you.`],
          ['What we do', `Fractional VP/COO roles. Full-time interim leadership. Program-based engagements. Custom to your needs.`],
          ['Outcome', `You pay for what you need, when you need it. Scale as your situation evolves. Continuity while you need it.`]]
        },
        { title: 'Proven Track Record at Scale', rows: [
          ['Scope', `Global operations at scale. Transformations across CRM, eCommerce, CX, Consumer Apps and Retention. Customer support. $1b+ budgets.`],
          ['What we do', `Bring rigor and experience for your execution. Design systems and processes for your scale. Lead teams through change and transitions.`],
          ['Outcome', `Leadership continuity. Confidence in your execution. Time bought for your transition.`]]
        }]
        } />
      
      <HowWeWorkCallout items={[
      "Every company's interim leadership need is unique. We discuss your specific challenge, design the right engagement model, and execute immediately."]
      } />
      <WhyThisWorks
        eyebrow="04 · Why this works"
        headline="Why this works"
        headlineEm=""
        body={[
        "I've been in the role you need: Constant change, quarterly execution, Leadership experience in Europe, USA and Asia.",
        "I led organizations through growth and contractions, built from the ground up, or restructured.",
        "I learned what works and why changes fail. I know to execute decisively and keep stakeholders abreast and aligned.",
        "I have the seniority and experience to transition smoothly to your permanent leadership."]
        } />
      
      <CuriousCta go={go} />
    </main>);

}

// -----------------------------------------------------------------------------
// Transformation
// -----------------------------------------------------------------------------
function TransformationPage({ go }) {
  return (
    <main data-screen-label="Transformation">
      <PageHeader
        num="04"
        title="Transformation Leadership"
        tagline="Complex change, cleanly executed."
        lede={`"It's easier to build widgets than to change how people work." Get strategic leadership for digital / AI transformations, organisational redesign, and platform migrations at scale.`} />

      <PageFigure
        src="https://images.unsplash.com/photo-1448630360428-65456885c650?w=2000&q=80"
        alt="A skyscraper mid-construction, scaffolding rising into the sky" />

      <PillarsSection
        eyebrow="01 · The transformation challenge"
        headline=""
        headlineEm=""
        intro=""
        pillars={[
        { title: 'The Transformation Challenge', rows: [
          ['Reality', `You're introducing AI, modernising legacy platforms, consolidating tools, reorganising functions. These complex, multi-stakeholder initiatives bring massive change to your organization.`],
          ['Why they are hard', `Technical and business stakeholders think differently. Change introduces risk. Communication is often an afterthought. Teams lack the clarity that 'tomorrow will be better'. Governance and decisions, and executes while keeping progress.`],
          ['What this means for you', `You need someone who understands both, the technology and the organizational change component. Someone who creates clarity, brings stakeholders together, makes hard decisions, and executes while keeping progress.`]]
        },
        { title: 'Our Transformation Approach', rows: [
          ['The Philosophy', `It's easier to build widgets than to change how people work. We focus technology and how people & processes are enabled by it. We create clarity on vision and bring people together. From the top through the entire organization.`],
          ['How we lead', `We step in as Transformation leader. We design and align the change together, then own governance, stakeholder alignment and execution program office. We help you make tough calls and keep things moving.`],
          ['What success looks like', `Stakeholders understand the goal and the path. Change gets embraced. Business continues. Technology creates the outcome you expect.`]]
        },
        { title: 'Proven Track Record at Scale', rows: [
          ['Global Function Transformations', `Established global Sales-, and Channel Enablement and Operations in a Fortune 50 separation with revenue continuity. Restructured a 7000+ organization from regional to functional setup maintaining customer and employee satisfaction. Led strategy, execution and change management across business units and region teams in line with company agenda.`],
          ['Platform & Infrastructure Modernization', `Standardized global $50b channel-data collection infrastructure and operating model to standard cloud platform with outsourced operations. Reduce overpayments and opex, increased inventory visibility.\nReplatformed CRM for 6000 sellers and 50000+ channel partners. Modernized sales process and reduced opex.`],
          ['Consumer Engagement Transformation', `Transformed engagement with 13 million subscribers from functional messaging to tow-way engagement. Increase retention, reduced churn. Aligned 10+ divisions and their apps to one company-wide Consumer App with 40+ million monthly users. Establised a new revenue channel.`]]
        }]
        } />
      

      <HowWeWorkCallout items={[
      "Transformation needs different help at every stage and company. We discuss your specific challenge, design the right leadership role, and execute from day one.",
      "You get experienced guidance and decisive execution from someone who has led change at massive scale before."]
      } />

      <WhyThisWorks
        eyebrow="04 · Why this works"
        headline="Why this works"
        headlineEm=""
        body={[
        "I have successfully completed transformations that touched thousands of employees and modernised decades-old processes with new technology — which has never been more important than in today's era of AI.",
        "I bring senior stakeholders along for the journey and have learned the required persistence and the need for tough decisions."]
        } />
      
      <CuriousCta go={go} />
    </main>);

}

Object.assign(window, { AdvisoryPage, InterimPage, TransformationPage });