/* BrandArchway — Process page sections + App root */

const { useState, useEffect, useRef } = React;

/* ── HERO ── */
function ProcessHero() {
  return (
    <section className="wave-bg" style={{ padding: '120px 0 96px' }} data-screen-label="01 Hero">
      <WaveOverlay />
      <div style={{ ...sharedStyles.containerNarrow, textAlign: 'center' }}>
        <SectionLabel text={T.hero.eyebrow} />
        <h1 style={{
          fontFamily: 'Inter, sans-serif', fontSize: 'clamp(48px, 7vw, 88px)', fontWeight: 700,
          lineHeight: 1.02, letterSpacing: '-2px', color: C.ink,
          marginBottom: 24, textWrap: 'balance',
        }}>
          {T.hero.titleA}
          <em style={{ ...PAYOFF, letterSpacing: '-1.5px' }}>{T.hero.titleB}</em>
        </h1>
        <p style={{ fontSize: 19, lineHeight: 1.65, color: C.body, maxWidth: 640, margin: '0 auto 40px', fontWeight: 400 }}>
          {T.hero.sub}
        </p>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 72 }}>
          <Button href={URLS.audit} target="_top">{T.hero.ctaPrimary}</Button>
          <Button variant="secondary" href="#blueprint">{T.hero.ctaSecondary}</Button>
        </div>

        {/* Hero stat bar — 4 numbers, asymmetric weight */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
          background: C.card, borderRadius: 20, overflow: 'hidden',
          border: '1px solid #E8E4F0',
          boxShadow: '0 2px 12px rgba(100,80,160,0.06)',
          maxWidth: 920, margin: '0 auto',
        }}>
          {T.hero.stats.map((s, i) => (
            <div key={s.n} style={{
              padding: '28px 20px',
              borderRight: i < 3 ? `1px solid ${C.hairlineSoft}` : 'none',
              textAlign: 'left',
            }}>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 6, marginBottom: 6 }}>
                <span style={{ fontSize: 52, fontWeight: 700, color: C.ink, lineHeight: 1, letterSpacing: '-1.5px' }}>{s.n}</span>
                <span style={{ fontSize: 14, fontWeight: 500, color: C.muted }}>{s.u}</span>
              </div>
              <div style={{ fontSize: 13, color: C.muted, lineHeight: 1.4 }}>{s.t}</div>
            </div>
          ))}
        </div>

        <p style={{ fontSize: 13, color: C.muted, marginTop: 20, textAlign: 'center', letterSpacing: '0.1px' }}>
          {T.hero.finePrint}
        </p>
      </div>
    </section>
  );
}

/* ── INTRO STRIPE — the contract, in one breath ── */
function PromiseStripe() {
  return (
    <section style={{ background: C.dark, padding: '64px 0' }} data-screen-label="02 Promise">
      <div style={{ ...sharedStyles.containerNarrow, textAlign: 'center' }}>
        <div style={{ fontSize: 12, fontWeight: 600, color: C.primary, letterSpacing: '1.5px', textTransform: 'uppercase', marginBottom: 18 }}>
          The Bold Claim
        </div>
        <p style={{
          fontFamily: 'Inter, sans-serif', fontSize: 'clamp(24px, 3.2vw, 36px)', fontWeight: 700,
          lineHeight: 1.25, letterSpacing: '-0.6px', color: C.onDark, textWrap: 'balance',
        }}>
          In 9 to 12 months, your company owns a fully operational marketing capability
          that generates qualified inbound leads — run entirely by your internal team —{' '}
          <em style={PAYOFF}>without us, ever again.</em>
        </p>
      </div>
    </section>
  );
}

/* ── TIMELINE — sticky rail + scrolling chapters ── */

const PHASES = [
  {
    num: 1,
    range: 'Months 1 – 3',
    name: 'Brand Co-Pilot',
    tagline: 'Authority by design.',
    job: "We translate technical expertise into language the right buyers recognise — then install the infrastructure that makes finding you, trusting you, and shortlisting you the path of least resistance.",
    concern: {
      q: '"We are engineers. We do not think in brand. Is this not just fluff?"',
      a: 'It is not a logo exercise. It is taking the way your senior engineers explain the product over coffee and making the market hear that same voice. Phase 1 is the foundation that makes everything in Phase 2 actually convert.',
    },
    work: [
      { t: 'Audit positioning and messaging', d: 'We tear apart what is on the surface today — site, decks, LinkedIn, outbound. What works, what dilutes, what is missing.' },
      { t: 'Define the core narrative and authority angles', d: 'One position the market remembers. Not a tagline. A point of view sharp enough that competitors cannot copy it without sounding like you.' },
      { t: 'Map the ideal customer profile and buying journey', d: 'Built on your team\u2019s real customer knowledge, not agency guesswork. The people who close deals tell us who they close them with.' },
      { t: 'Build the strategic marketing foundation', d: 'Site copy, LinkedIn, sales decks, outbound — all speaking the same language for the first time.' },
      { t: 'Install the lead generation infrastructure', d: 'LinkedIn, content engine, ads, CRM. Set up inside your own accounts, under your control. No agency dashboards.' },
      { t: 'Launch the first campaigns', d: 'Leads start flowing before Phase 1 closes. We do not wait for a perfect launch.' },
    ],
    outcome: 'A position the market remembers, and a pipeline that has already started moving.',
    own: [
      'A documented brand position',
      'Complete messaging architecture',
      'Lead-gen stack live in your accounts',
      'First qualified inbound activity',
    ],
  },
  {
    num: 2,
    range: 'Months 3 – 6',
    name: 'Lead Engine',
    tagline: 'Pipeline on demand.',
    job: "We run the system in the real world. Test messages, test channels, test audiences. Document everything we learn, in language your team will still understand a year from now.",
    concern: {
      q: '"How do we know the leads will be qualified?"',
      a: 'The system is built on your team\u2019s product knowledge, not generic agency templates. That is why the leads are better — the messaging comes from people who actually understand what they are selling.',
    },
    work: [
      { t: 'Run campaigns shoulder-to-shoulder', d: 'We hold the ropes while your team learns the moves. Weekly stand-ups, every decision visible.' },
      { t: 'Test angles, channels, audiences', d: 'No theoretical playbooks. Real market feedback at weekly intervals — what converts, what does not, why.' },
      { t: 'Optimise on real data', d: 'Cut what does not work. Double down on what does. Every change traceable to a number, not a hunch.' },
      { t: 'Build documented playbooks for every process', d: 'Written for non-marketers. Step by step. No black boxes, no jargon, no "ask the agency".' },
      { t: 'Align sales and marketing into one motion', d: 'The pipeline only works when the handoff does. We design the handover before the volume hits.' },
    ],
    outcome: 'A pipeline the sales team can count on, and playbooks proven against real market data.',
    own: [
      'A predictable inbound pipeline',
      'Validated playbooks per channel',
      'Internal team running live campaigns',
      'Real performance data, not projections',
    ],
  },
  {
    num: 3,
    range: 'Months 6 – 12',
    name: 'Team Enablement',
    tagline: 'One investment. Permanent capability.',
    job: "We transfer everything. Train the internal team to run marketing independently, decrease our involvement on a published schedule, and step back — on purpose.",
    concern: {
      q: '"We do not have anyone internal who can run this."',
      a: 'You do not need to from day one. We run it with you (or for you, at first) and transfer control gradually as your team builds confidence. Nobody gets thrown in the deep end.',
    },
    work: [
      { t: 'Hands-on training for the internal team', d: 'Not classroom theory. They run the system live. We coach from behind, in the same documents they will keep using.' },
      { t: 'Gradual handover with decreasing involvement', d: 'Weekly stand-ups become monthly check-ins, then quarterly, then none. The schedule is set on day one.' },
      { t: 'Transfer every template, playbook, account, and asset', d: 'Logins, documents, ad accounts, creative files, the CRM. All in your name. All under your control.' },
      { t: 'Final readiness review', d: 'A go-live moment, not a quiet drift. We sign off on the team\u2019s ability to run it alone.' },
      { t: 'We leave.', d: 'On purpose. No "advisory retainer". No quarterly check-ins by default. The only reason to call us back is a future engagement of your choosing.' },
    ],
    outcome: 'A marketing function you own and run independently — every system, every login, every euro of former agency budget — back inside the company.',
    own: [
      'A marketing function run by your team',
      'Every template, playbook, account',
      'A trained internal team',
      'Marketing you own, not rent.',
    ],
  },
];

/* ── COMPACT PHASE SUMMARY ── (replaces the heavy sticky-rail timeline; the ROI tool below carries the rest of the page) */
function PhaseSummary() {
  // Proportional widths: 3mo / 3mo / 6mo → 25% / 25% / 50%
  const fracs = [0.25, 0.25, 0.50];
  const segs = T.phaseSummary.bar.map((b, i) => ({ num: i + 1, label: b.label, range: b.range, frac: fracs[i] }));
  return (
    <section className="wave-bg" style={{ padding: '120px 0 96px' }} data-screen-label="03 Phases">
      <WaveOverlay />
      <div style={sharedStyles.container}>
        <div style={{ maxWidth: 720, marginBottom: 48 }}>
          <SectionLabel text={T.phaseSummary.eyebrow} />
          <h2 style={{
            fontFamily: 'Inter, sans-serif', fontSize: 'clamp(36px, 4.6vw, 54px)', fontWeight: 700,
            lineHeight: 1.05, letterSpacing: '-1.2px', color: C.ink, marginBottom: 18, textWrap: 'balance',
          }}>
            {T.phaseSummary.titleA}
            <em style={PAYOFF}>{T.phaseSummary.titleB}</em>
          </h2>
          <p style={{ fontSize: 18, color: C.body, lineHeight: 1.65, maxWidth: 580 }}>
            {T.phaseSummary.sub}
          </p>
        </div>

        {/* Horizontal phase bar */}
        <div style={{ marginBottom: 32 }}>
          <div style={{
            display: 'flex', height: 56, borderRadius: 14, overflow: 'hidden',
            border: `1px solid ${C.hairline}`, background: C.card,
          }}>
            {segs.map((s, i) => (
              <div key={s.num} style={{
                flex: s.frac, padding: '0 20px',
                background: i === 0 ? 'rgba(161,0,255,0.10)' : i === 1 ? 'rgba(161,0,255,0.16)' : 'rgba(161,0,255,0.24)',
                borderRight: i < 2 ? `1px solid ${C.hairline}` : 'none',
                display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12, minWidth: 0,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 12, minWidth: 0 }}>
                  <div style={{
                    width: 28, height: 28, borderRadius: '50%', background: C.primary, color: C.onDark,
                    display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 13, fontWeight: 700, flexShrink: 0,
                  }}>{s.num}</div>
                  <div style={{ fontSize: 15, fontWeight: 700, color: C.ink, whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
                    {s.label}
                  </div>
                </div>
                <div style={{ fontSize: 12, fontWeight: 600, color: C.muted, letterSpacing: '0.4px', whiteSpace: 'nowrap' }}>
                  {s.range}
                </div>
              </div>
            ))}
          </div>
          <div style={{
            display: 'flex', justifyContent: 'space-between',
            marginTop: 8, fontSize: 11, fontWeight: 600, color: C.muted,
            letterSpacing: '1px', fontVariantNumeric: 'tabular-nums',
          }}>
            <span>M01</span><span>M03</span><span>M06</span><span>M12</span>
          </div>
        </div>

        {/* Three phase cards */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }} className="phase-cards">
          {T.phaseSummary.cards.map((p, idx) => (
            <article key={p.name} style={{
              background: C.card, borderRadius: 16, padding: 28,
              border: `1px solid ${C.hairline}`,
              display: 'flex', flexDirection: 'column', gap: 14,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <div style={{
                  width: 36, height: 36, borderRadius: 10, background: C.primary, color: C.onDark,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 15, fontWeight: 700, flexShrink: 0,
                }}>{String(idx + 1).padStart(2, '0')}</div>
                <div>
                  <div style={{ fontSize: 11, fontWeight: 600, color: C.primary, letterSpacing: '0.8px', textTransform: 'uppercase' }}>
                    {p.eyebrow}
                  </div>
                  <div style={{ fontSize: 20, fontWeight: 700, color: C.ink, lineHeight: 1.2, marginTop: 2 }}>
                    {p.name}
                  </div>
                </div>
              </div>
              <div style={{
                fontFamily: "'Libre Baskerville', serif", fontStyle: 'italic',
                fontSize: 16, color: C.primary, lineHeight: 1.3,
              }}>
                {p.tagline}
              </div>
              <p style={{ fontSize: 14, color: C.body, lineHeight: 1.6, flex: 1 }}>
                {p.job}
              </p>
              <div style={{ borderTop: `1px solid ${C.hairlineSoft}`, paddingTop: 14 }}>
                <div style={{ fontSize: 11, fontWeight: 600, color: C.muted, letterSpacing: '0.6px', textTransform: 'uppercase', marginBottom: 10 }}>
                  {T.phaseSummary.youEndWith}
                </div>
                <div style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  {p.own.slice(0, 3).map(item => (
                    <div key={item} style={{ display: 'flex', alignItems: 'flex-start', gap: 8, fontSize: 13, color: C.bodyStrong, lineHeight: 1.5 }}>
                      <span style={{ width: 5, height: 5, borderRadius: '50%', background: C.primary, marginTop: 7, flexShrink: 0 }}></span>
                      {item}
                    </div>
                  ))}
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── VERTICAL MILESTONE TIMELINE ──
   Clean read-down list. Each row = month chip · title · description · phase tag.
   Far easier to scan than the alternating horizontal version. */
function MilestoneTimeline() {
  const milestones = T.timeline.milestones.map(ms => ({
    ...ms, phaseName: T.timeline.phaseNames[ms.phase],
  }));
  const phaseBg = { 1: 'rgba(161,0,255,0.10)', 2: 'rgba(161,0,255,0.16)', 3: 'rgba(161,0,255,0.24)' };

  return (
    <section className="wave-bg" style={{ padding: '120px 0' }} data-screen-label="04 Timeline">
      <WaveOverlay />
      <div style={sharedStyles.container}>
        <div style={{ maxWidth: 720, marginBottom: 56 }}>
          <SectionLabel text={T.timeline.eyebrow} />
          <h2 style={{
            fontFamily: 'Inter, sans-serif', fontSize: 'clamp(36px, 4.6vw, 54px)', fontWeight: 700,
            lineHeight: 1.05, letterSpacing: '-1.2px', color: C.ink, marginBottom: 18, textWrap: 'balance',
          }}>
            {T.timeline.titleA}
            <em style={PAYOFF}>{T.timeline.titleB}</em>
          </h2>
          <p style={{ fontSize: 18, color: C.body, lineHeight: 1.65, maxWidth: 580 }}>
            {T.timeline.sub}
          </p>
        </div>

        <div style={{
          background: C.card, borderRadius: 20,
          border: `1px solid ${C.hairline}`,
          padding: '8px 40px',
          position: 'relative',
        }} className="timeline-card">
          {/* Vertical rail */}
          <div style={{
            position: 'absolute',
            left: 112,
            top: 48, bottom: 48,
            width: 2,
            background: `linear-gradient(to bottom, ${C.hairlineSoft} 0%, ${C.primary} 12%, ${C.primary} 100%)`,
          }} className="timeline-rail"></div>

          {milestones.map((ms, i) => (
            <div key={ms.m} style={{
              display: 'grid',
              gridTemplateColumns: '92px 1fr',
              gap: 40,
              padding: '32px 0',
              borderTop: i === 0 ? 'none' : `1px solid ${C.hairlineSoft}`,
              position: 'relative',
              alignItems: 'flex-start',
            }} className="timeline-row">
              {/* Month chip */}
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 4, position: 'relative' }}>
                <div style={{
                  fontSize: 11, fontWeight: 700, color: C.muted,
                  letterSpacing: '1.5px', textTransform: 'uppercase',
                }}>
                  {T.timeline.monthLabel}
                </div>
                <div style={{
                  fontFamily: 'Inter, sans-serif',
                  fontSize: 44, fontWeight: 700, color: C.ink,
                  lineHeight: 1, letterSpacing: '-1.5px',
                  fontVariantNumeric: 'tabular-nums',
                }}>
                  {String(ms.m).padStart(2, '0')}
                </div>
              </div>

              {/* Node on rail */}
              <div style={{
                position: 'absolute',
                left: 112, top: 56,
                transform: 'translateX(-50%)',
                width: 20, height: 20, borderRadius: '50%',
                background: C.card, border: `3px solid ${C.primary}`,
                boxShadow: '0 2px 8px rgba(161,0,255,0.25)',
                zIndex: 2,
              }} className="timeline-node"></div>

              {/* Content */}
              <div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12, flexWrap: 'wrap' }}>
                  <div style={{
                    background: phaseBg[ms.phase],
                    color: C.ink,
                    padding: '4px 12px', borderRadius: 999,
                    fontSize: 11, fontWeight: 700, letterSpacing: '0.5px',
                    display: 'inline-flex', alignItems: 'center', gap: 8,
                    whiteSpace: 'nowrap',
                  }}>
                    <span style={{
                      width: 16, height: 16, borderRadius: '50%', background: C.primary, color: C.onDark,
                      display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                      fontSize: 10, fontWeight: 700, lineHeight: 1,
                    }}>{ms.phase}</span>
                    {ms.phaseName}
                  </div>
                </div>
                <div style={{
                  fontFamily: 'Inter, sans-serif',
                  fontSize: 24, fontWeight: 700, color: C.ink,
                  lineHeight: 1.25, letterSpacing: '-0.5px',
                  marginBottom: 10, textWrap: 'balance',
                }}>
                  {ms.title}
                </div>
                <div style={{
                  fontSize: 16, color: C.body, lineHeight: 1.65, maxWidth: 720,
                }} dangerouslySetInnerHTML={{ __html: ms.blurb }}></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* The sticky rail */
function PhaseRail({ activePhase, onPick }) {
  // 12-month vertical rail; three phase blocks proportional to months (3/3/6)
  const segments = [
    { num: 1, label: 'Brand Co-Pilot', months: '01\u2013\u200903', frac: 3/12 },
    { num: 2, label: 'Lead Engine', months: '03\u2013\u200906', frac: 3/12 },
    { num: 3, label: 'Team Enablement', months: '06\u2013\u200912', frac: 6/12 },
  ];
  const railHeight = 560;
  return (
    <div style={{
      position: 'sticky', top: 110,
      width: 320, flexShrink: 0,
      paddingTop: 4,
    }}>
      <div style={{ fontSize: 11, fontWeight: 600, color: C.muted, letterSpacing: '1.5px', textTransform: 'uppercase', marginBottom: 16 }}>
        The 12-month arc
      </div>

      <div style={{ position: 'relative', display: 'flex', gap: 20, height: railHeight }}>
        {/* Track + segments */}
        <div style={{ position: 'relative', width: 56, flexShrink: 0 }}>
          {/* Month tick labels */}
          {[0, 3, 6, 12].map(m => {
            const top = (m / 12) * railHeight;
            return (
              <div key={m} style={{
                position: 'absolute', top: top - 8, right: 14,
                fontSize: 11, fontWeight: 600, color: C.muted,
                letterSpacing: '0.5px', fontVariantNumeric: 'tabular-nums',
              }}>
                M{String(m).padStart(2, '0')}
              </div>
            );
          })}
          {/* Vertical track */}
          <div style={{
            position: 'absolute', top: 0, right: 0, bottom: 0,
            width: 8, borderRadius: 8,
            background: C.hairlineSoft, overflow: 'hidden',
          }}>
            {/* Active segment fill */}
            {segments.map((seg, i) => {
              const start = segments.slice(0, i).reduce((s, x) => s + x.frac, 0);
              const isActive = activePhase === seg.num;
              return (
                <div key={seg.num} style={{
                  position: 'absolute', left: 0, right: 0,
                  top: `${start * 100}%`, height: `${seg.frac * 100}%`,
                  background: isActive ? C.primary : 'transparent',
                  transition: 'background 0.4s ease',
                }} />
              );
            })}
          </div>
          {/* Boundary dots */}
          {[0, 3, 6, 12].map(m => {
            const top = (m / 12) * railHeight;
            return (
              <div key={`d${m}`} style={{
                position: 'absolute', top: top - 5, right: -4,
                width: 16, height: 16, borderRadius: '50%',
                background: C.card,
                border: `2px solid ${C.primary}`,
                boxShadow: '0 1px 4px rgba(0,0,0,0.08)',
              }} />
            );
          })}
        </div>

        {/* Phase labels alongside track */}
        <div style={{ position: 'relative', flex: 1 }}>
          {segments.map((seg, i) => {
            const start = segments.slice(0, i).reduce((s, x) => s + x.frac, 0);
            const isActive = activePhase === seg.num;
            return (
              <button
                key={seg.num}
                onClick={() => onPick(seg.num)}
                style={{
                  position: 'absolute', left: 0, right: 0,
                  top: `${start * 100}%`, height: `${seg.frac * 100}%`,
                  background: isActive ? 'rgba(161,0,255,0.06)' : 'transparent',
                  border: 'none', textAlign: 'left',
                  padding: '12px 16px',
                  cursor: 'pointer', borderRadius: 10,
                  transition: 'background 0.3s ease',
                  display: 'flex', flexDirection: 'column', justifyContent: 'flex-start',
                  gap: 4,
                }}
              >
                <div style={{
                  fontSize: 11, fontWeight: 600,
                  color: isActive ? C.primary : C.muted,
                  letterSpacing: '0.6px', textTransform: 'uppercase',
                }}>
                  Phase {seg.num} · {seg.months}
                </div>
                <div style={{
                  fontSize: 17, fontWeight: 700,
                  color: isActive ? C.ink : C.bodyStrong,
                  lineHeight: 1.2,
                }}>
                  {seg.label}
                </div>
              </button>
            );
          })}
        </div>
      </div>

      <div style={{
        marginTop: 28, paddingTop: 20, borderTop: `1px solid ${C.hairlineSoft}`,
        fontSize: 12, color: C.muted, lineHeight: 1.55,
      }}>
        Click a phase to jump to it, or scroll through the arc on the right.
      </div>
    </div>
  );
}

/* A single phase chapter on the right side */
function PhaseChapter({ phase, refSet }) {
  return (
    <article
      ref={refSet}
      data-phase={phase.num}
      data-screen-label={`Phase ${phase.num} ${phase.name}`}
      style={{
        scrollMarginTop: 120,
        paddingBottom: 96,
        minHeight: 700,
      }}
    >
      {/* Phase header strip */}
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
        <div style={{
          width: 48, height: 48, borderRadius: 12,
          background: C.primary, color: C.card,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: 'Inter, sans-serif', fontSize: 20, fontWeight: 700,
          flexShrink: 0,
        }}>
          {String(phase.num).padStart(2, '0')}
        </div>
        <div>
          <div style={{ fontSize: 12, fontWeight: 600, color: C.primary, letterSpacing: '1px', textTransform: 'uppercase' }}>
            Phase {phase.num} · {phase.range}
          </div>
          <div style={{ fontSize: 28, fontWeight: 700, color: C.ink, letterSpacing: '-0.4px', lineHeight: 1.2, marginTop: 4 }}>
            {phase.name}
          </div>
        </div>
      </div>

      {/* Tagline as the visual headline */}
      <h3 style={{
        fontFamily: 'Inter, sans-serif',
        fontSize: 'clamp(34px, 4.2vw, 52px)', fontWeight: 700,
        lineHeight: 1.05, letterSpacing: '-1.2px', color: C.ink,
        marginBottom: 20, textWrap: 'balance',
      }}>
        <em style={PAYOFF}>{phase.tagline}</em>
      </h3>

      <p style={{ fontSize: 18, color: C.body, lineHeight: 1.65, marginBottom: 32, maxWidth: 640 }}>
        {phase.job}
      </p>

      {/* What we do */}
      <div style={{
        background: C.card, borderRadius: 16,
        border: `1px solid ${C.hairline}`,
        padding: 32, marginBottom: 24,
      }}>
        <div style={{ fontSize: 12, fontWeight: 600, color: C.muted, letterSpacing: '1px', textTransform: 'uppercase', marginBottom: 22 }}>
          What we do, together
        </div>
        <ol style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 20 }}>
          {phase.work.map((w, i) => (
            <li key={w.t} style={{ display: 'flex', gap: 18, alignItems: 'flex-start' }}>
              <div style={{
                width: 28, height: 28, borderRadius: '50%',
                background: 'rgba(161,0,255,0.08)',
                color: C.primary,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                fontFamily: 'Inter, sans-serif', fontSize: 13, fontWeight: 700,
                flexShrink: 0, fontVariantNumeric: 'tabular-nums', marginTop: 1,
              }}>
                {String(i + 1).padStart(2, '0')}
              </div>
              <div style={{ flex: 1 }}>
                <div style={{ fontSize: 17, fontWeight: 700, color: C.ink, marginBottom: 4, lineHeight: 1.35 }}>
                  {w.t}
                </div>
                <div style={{ fontSize: 15, color: C.body, lineHeight: 1.6 }}>
                  {w.d}
                </div>
              </div>
            </li>
          ))}
        </ol>
      </div>

      {/* End-of-phase outcome card */}
      <div style={{
        background: C.dark, borderRadius: 16, padding: 32, marginBottom: 24,
      }}>
        <div style={{ fontSize: 12, fontWeight: 600, color: C.primary, letterSpacing: '1px', textTransform: 'uppercase', marginBottom: 14 }}>
          What you have at end of Phase {phase.num}
        </div>
        <p style={{ fontSize: 20, color: C.onDark, lineHeight: 1.45, marginBottom: 22, fontWeight: 500, letterSpacing: '-0.2px' }}>
          {phase.outcome}
        </p>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
          {phase.own.map(item => (
            <div key={item} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontSize: 14, color: C.onDarkSoft, lineHeight: 1.5 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: C.primary, flexShrink: 0, display: 'block', marginTop: 7 }}></span>
              {item}
            </div>
          ))}
        </div>
      </div>

      {/* Concern reframe */}
      <div style={{
        background: C.surfaceSoft, borderRadius: 16, padding: 28,
        display: 'flex', gap: 20, alignItems: 'flex-start',
      }}>
        <div style={{
          fontFamily: "'Libre Baskerville', serif", fontStyle: 'italic',
          fontSize: 48, color: C.primary, lineHeight: 0.8, flexShrink: 0, marginTop: 6,
        }}>
          “
        </div>
        <div>
          <div style={{ fontSize: 16, color: C.bodyStrong, lineHeight: 1.55, marginBottom: 12, fontStyle: 'italic' }}>
            {phase.concern.q}
          </div>
          <div style={{ fontSize: 15, color: C.body, lineHeight: 1.65 }}>
            <strong style={{ color: C.ink, fontWeight: 700 }}>Our answer.</strong> {phase.concern.a}
          </div>
        </div>
      </div>
    </article>
  );
}

function TimelineSection() {
  const [activePhase, setActivePhase] = useState(1);
  const refs = useRef({});

  useEffect(() => {
    const observer = new IntersectionObserver(
      (entries) => {
        // Take the most-visible chapter as active
        let bestRatio = 0;
        let bestNum = null;
        entries.forEach(en => {
          if (en.intersectionRatio > bestRatio) {
            bestRatio = en.intersectionRatio;
            bestNum = Number(en.target.dataset.phase);
          }
        });
        if (bestNum != null) setActivePhase(bestNum);
      },
      { rootMargin: '-25% 0px -45% 0px', threshold: [0.1, 0.25, 0.5, 0.75] }
    );
    Object.values(refs.current).forEach(el => el && observer.observe(el));
    return () => observer.disconnect();
  }, []);

  const pickPhase = (num) => {
    const el = refs.current[num];
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  return (
    <section className="wave-bg" style={{ padding: '96px 0 64px' }} data-screen-label="03 Timeline">
      <WaveOverlay />
      <div style={sharedStyles.containerWide}>
        <div style={{ maxWidth: 720, marginBottom: 56 }}>
          <SectionLabel text="The Archway Method" />
          <h2 style={{
            fontFamily: 'Inter, sans-serif', fontSize: 'clamp(36px, 4.8vw, 56px)', fontWeight: 700,
            lineHeight: 1.05, letterSpacing: '-1.2px', color: C.ink, marginBottom: 18, textWrap: 'balance',
          }}>
            Three phases. One engagement. Then we{' '}
            <em style={PAYOFF}>leave.</em>
          </h2>
          <p style={{ fontSize: 18, color: C.body, lineHeight: 1.65, maxWidth: 580 }}>
            Every phase has a job, a tagline, and a measurable outcome. The engagement ends when your team can run the whole thing without us, by design.
          </p>
        </div>

        <div style={{ display: 'flex', gap: 72, alignItems: 'flex-start' }} className="timeline-grid">
          <PhaseRail activePhase={activePhase} onPick={pickPhase} />
          <div style={{ flex: 1, minWidth: 0 }}>
            {PHASES.map(p => (
              <PhaseChapter key={p.num} phase={p}
                refSet={el => { refs.current[p.num] = el; }} />
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── DELIVERABLES — "What's in your hands when we leave" ── */
const DELIVERABLES = [
  { t: 'Brand positioning document', d: 'The one-page truth your team uses to test every word that leaves the building.' },
  { t: 'Messaging architecture', d: 'Hierarchy of message, by audience, by stage. Written for sales to use verbatim.' },
  { t: 'ICP and buying journey map', d: 'Who you serve better than anyone else, and the moments they decide.' },
  { t: 'Website copy and structure', d: 'Pages, sections, calls to action — sourced from real customer language, not headlines.' },
  { t: 'LinkedIn content engine', d: 'Format library, posting cadence, named-author rotation. The flywheel, documented.' },
  { t: 'Ad accounts (Google, LinkedIn)', d: 'Set up inside your business manager. All audiences, creative, and history yours from day one.' },
  { t: 'CRM and lead routing', d: 'HubSpot or Pipedrive, configured. Lead lifecycle stages, scoring, sales handover rules.' },
  { t: 'Sales enablement deck', d: 'Pitch, proof, objections handled. The version your reps actually use.' },
  { t: 'Process playbooks', d: 'Step-by-step, written for non-marketers. One per channel, one per workflow.' },
  { t: 'Trained internal team', d: 'A team that has run the system live for six months with us before we let go.' },
  { t: '12-month performance dataset', d: 'Every campaign, every variant, every lesson — open for your team to inherit.' },
  { t: 'The Archway Method documentation', d: 'How the whole thing fits together. So next year\u2019s hire can walk in and understand.' },
];

function DeliverablesBand() {
  return (
    <section style={{ background: C.canvas, padding: '120px 0' }} data-screen-label="04 Deliverables">
      <div style={sharedStyles.container}>
        <div style={{ maxWidth: 760, marginBottom: 56 }}>
          <SectionLabel text="What you own when we leave" />
          <h2 style={{
            fontFamily: 'Inter, sans-serif', fontSize: 'clamp(36px, 4.4vw, 52px)', fontWeight: 700,
            lineHeight: 1.05, letterSpacing: '-1.2px', color: C.ink, marginBottom: 18, textWrap: 'balance',
          }}>
            Twelve assets you take with you.{' '}
            <em style={PAYOFF}>Forever.</em>
          </h2>
          <p style={{ fontSize: 18, color: C.body, lineHeight: 1.65, maxWidth: 580 }}>
            No black boxes, no proprietary tooling. Every artefact is built in your accounts, in editable formats, with documentation written for the people who will inherit it.
          </p>
        </div>

        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
          gap: 12,
        }}>
          {DELIVERABLES.map((d, i) => (
            <div key={d.t}
              style={{
                background: C.card, borderRadius: 12, padding: 24,
                border: `1px solid ${C.hairlineSoft}`,
                display: 'flex', flexDirection: 'column', gap: 10,
                transition: 'box-shadow 0.2s, transform 0.2s',
              }}
              onMouseEnter={e => { e.currentTarget.style.boxShadow = '0 4px 16px rgba(20,20,20,0.06)'; e.currentTarget.style.transform = 'translateY(-2px)'; }}
              onMouseLeave={e => { e.currentTarget.style.boxShadow = 'none'; e.currentTarget.style.transform = 'translateY(0)'; }}
            >
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 2 }}>
                <span style={{
                  fontFamily: 'Inter, sans-serif', fontSize: 11, fontWeight: 700,
                  color: C.primary, letterSpacing: '0.5px',
                  fontVariantNumeric: 'tabular-nums',
                }}>
                  {String(i + 1).padStart(2, '0')}
                </span>
                <span style={{ flex: 1, height: 1, background: C.hairlineSoft }}></span>
              </div>
              <div style={{ fontSize: 16, fontWeight: 700, color: C.ink, lineHeight: 1.3 }}>{d.t}</div>
              <div style={{ fontSize: 14, color: C.body, lineHeight: 1.55 }}>{d.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── CONCERNS — interactive accordion ── */
const CONCERNS = [
  {
    q: 'We are engineers, we do not think in brand. Is this not just fluff?',
    a: 'This is not a logo exercise. It is translating your technical expertise into language that makes your ideal buyers say "they get it." It is the foundation that makes everything in Phase 2 actually convert.',
  },
  {
    q: 'How do we know the leads will be qualified?',
    a: 'The system is built on your team\u2019s product knowledge, not generic agency templates. That is why the leads are better — the messaging comes from people who actually understand what they are selling.',
  },
  {
    q: 'We do not have anyone internal who can run this.',
    a: 'You do not need to from day one. We run it with you (or for you initially) and transfer control gradually as your team builds confidence. Nobody gets thrown in the deep end.',
  },
  {
    q: 'Our team does not have marketing experience.',
    a: 'Every process is documented in playbooks designed for non-marketers. Your team does not need to become marketing experts — they need to follow a system built specifically for their business.',
  },
  {
    q: 'This sounds expensive.',
    a: 'Compare it to 2 or 3 years of agency retainers. This is one investment that eliminates the recurring cost entirely. After the engagement, every euro goes into execution like ad spend, not consultancy fees.',
  },
  {
    q: 'How does it actually end? What stops it from quietly becoming a retainer?',
    a: 'The handover schedule is published on day one. Weekly stand-ups in Phase 2, monthly in Phase 3, then a signed-off readiness review. The engagement ends because the contract says so — not because we ran out of things to bill.',
  },
];

function ConcernAccordion() {
  const [open, setOpen] = useState(0);
  return (
    <section style={{ background: C.card, padding: '120px 0' }} data-screen-label="05 Concerns">
      <div style={sharedStyles.container}>
        <div style={{
          display: 'grid', gridTemplateColumns: 'minmax(280px, 380px) 1fr',
          gap: 96, alignItems: 'flex-start',
        }} className="concerns-grid">
          <div>
            <SectionLabel text="The things you are thinking" />
            <h2 style={{
              fontFamily: 'Inter, sans-serif', fontSize: 'clamp(34px, 4vw, 48px)', fontWeight: 700,
              lineHeight: 1.05, letterSpacing: '-1.1px', color: C.ink, marginBottom: 20, textWrap: 'balance',
            }}>
              The six questions every director{' '}
              <em style={PAYOFF}>asks.</em>
            </h2>
            <p style={{ fontSize: 16, color: C.body, lineHeight: 1.65 }}>
              We have heard them in sixty-plus first calls. The answers do not change. Read them here, ask them again on the audit call.
            </p>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {CONCERNS.map((c, i) => {
              const isOpen = open === i;
              return (
                <div key={c.q} style={{
                  borderTop: i === 0 ? `1px solid ${C.hairline}` : 'none',
                  borderBottom: `1px solid ${C.hairline}`,
                }}>
                  <button
                    onClick={() => setOpen(isOpen ? -1 : i)}
                    style={{
                      width: '100%', textAlign: 'left',
                      background: 'transparent', border: 'none', cursor: 'pointer',
                      padding: '24px 0',
                      display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 24,
                    }}
                  >
                    <div style={{ display: 'flex', gap: 16, alignItems: 'flex-start', flex: 1 }}>
                      <span style={{
                        fontFamily: 'Inter, sans-serif', fontSize: 12, fontWeight: 700,
                        color: C.muted, letterSpacing: '0.5px',
                        fontVariantNumeric: 'tabular-nums', marginTop: 6,
                        minWidth: 24,
                      }}>
                        {String(i + 1).padStart(2, '0')}
                      </span>
                      <span style={{
                        fontFamily: 'Inter, sans-serif', fontSize: 19, fontWeight: 600,
                        color: C.ink, lineHeight: 1.35, fontStyle: 'italic',
                      }}>
                        "{c.q}"
                      </span>
                    </div>
                    <span style={{
                      width: 32, height: 32, borderRadius: '50%',
                      background: isOpen ? C.primary : C.surfaceSoft,
                      color: isOpen ? C.onDark : C.ink,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      flexShrink: 0, fontSize: 18, fontWeight: 400, lineHeight: 1,
                      transition: 'all 0.2s ease',
                      marginTop: 2,
                    }}>
                      {isOpen ? '\u2013' : '+'}
                    </span>
                  </button>
                  <div style={{
                    maxHeight: isOpen ? 400 : 0,
                    overflow: 'hidden',
                    transition: 'max-height 0.35s ease',
                  }}>
                    <div style={{
                      paddingLeft: 40, paddingRight: 56,
                      paddingBottom: 28, paddingTop: 4,
                      fontSize: 16, color: C.body, lineHeight: 1.7, maxWidth: 680,
                    }}>
                      {c.a}
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── GUARANTEE — dark, big, the safety net ── */
function GuaranteeBand() {
  return (
    <section style={{ background: C.dark, padding: '120px 0' }} data-screen-label="06 Guarantee">
      <div style={{ ...sharedStyles.containerNarrow, textAlign: 'center' }}>
        <SectionLabel text="The Guarantee" dark />
        <h2 style={{
          fontFamily: 'Inter, sans-serif', fontSize: 'clamp(40px, 5.5vw, 68px)', fontWeight: 700,
          lineHeight: 1.05, letterSpacing: '-1.6px', color: C.onDark,
          marginBottom: 28, textWrap: 'balance',
        }}>
          If the system does not cover your investment in 12 months, we keep working{' '}
          <em style={PAYOFF}>until it does.</em>
        </h2>
        <p style={{ fontSize: 19, color: C.onDarkSoft, lineHeight: 1.65, maxWidth: 640, margin: '0 auto 56px' }}>
          Free of charge. We only succeed when you do — our actual risk is additional time,
          which keeps us fully incentivised to make the system work the first time.
        </p>

        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1,
          background: C.darkRule, borderRadius: 16, overflow: 'hidden',
          maxWidth: 760, margin: '0 auto',
        }} className="guarantee-grid">
          {[
            { t: 'ROI-linked', d: 'Tied to a pipeline number agreed at kickoff. Not vanity metrics.' },
            { t: 'Time-bound', d: 'Reviewed at month 12. No "let us extend for another quarter".' },
            { t: 'Aligned', d: 'We work for free if we miss. Same skin in the game.' },
          ].map(item => (
            <div key={item.t} style={{ background: C.dark, padding: '32px 28px', textAlign: 'left' }}>
              <div style={{ fontSize: 14, fontWeight: 600, color: C.primary, letterSpacing: '0.5px', textTransform: 'uppercase', marginBottom: 12 }}>
                {item.t}
              </div>
              <div style={{ fontSize: 14, color: C.onDarkSoft, lineHeight: 1.55 }}>{item.d}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── WHO THIS IS NOT FOR — polarising ── */
function NotForBand() {
  const items = [
    'You want a "set it and forget it" quick fix',
    'You will not commit internal hours to learn the system',
    'You just want someone to "do your social media"',
    'You are not willing to be in the room alongside your team during the build',
  ];
  return (
    <section style={{ background: C.canvas, padding: '96px 0' }} data-screen-label="07 NotFor">
      <div style={sharedStyles.container}>
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80,
          alignItems: 'center',
        }} className="notfor-grid">
          <div>
            <SectionLabel text="Polarising, on purpose" />
            <h2 style={{
              fontFamily: 'Inter, sans-serif', fontSize: 'clamp(32px, 3.8vw, 44px)', fontWeight: 700,
              lineHeight: 1.05, letterSpacing: '-1px', color: C.ink, marginBottom: 20, textWrap: 'balance',
            }}>
              Who this is{' '}
              <em style={PAYOFF}>not for.</em>
            </h2>
            <p style={{ fontSize: 17, color: C.body, lineHeight: 1.65 }}>
              The Archway Method works because both sides are committed. If any of the below describes you, an agency retainer is a better fit — and we will say so on the call.
            </p>
          </div>
          <div style={{
            background: C.card, borderRadius: 16, padding: 32,
            border: `1px solid ${C.hairline}`,
          }}>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 18 }}>
              {items.map(i => (
                <div key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 14, fontSize: 16, color: C.bodyStrong, lineHeight: 1.55 }}>
                  <div style={{
                    width: 22, height: 22, borderRadius: 6, flexShrink: 0,
                    background: '#F0EBF5',
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    marginTop: 2,
                  }}>
                    <div style={{ width: 10, height: 2, background: C.muted, borderRadius: 1 }}></div>
                  </div>
                  {i}
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* ── FINAL CTA ── */
function FinalCta() {
  return (
    <section id="contact" style={{ background: C.dark, padding: '110px 0' }} data-screen-label="08 CTA">
      <div style={{ ...sharedStyles.containerNarrow, textAlign: 'center' }}>
        <h2 style={{
          fontFamily: 'Inter, sans-serif', fontSize: 'clamp(40px, 5vw, 60px)', fontWeight: 700,
          lineHeight: 1.05, letterSpacing: '-1.4px', color: C.onDark,
          marginBottom: 20, textWrap: 'balance',
        }}>
          {T.cta.titleA}
          <em style={PAYOFF}>{T.cta.titleB}</em>
        </h2>
        <p style={{ fontSize: 18, color: C.onDarkSoft, lineHeight: 1.65, maxWidth: 580, margin: '0 auto 36px' }}>
          {T.cta.sub}
        </p>
        <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
          <Button href={URLS.method} target="_top">{T.cta.primary}</Button>
          <Button variant="ghostDark" href={URLS.audit} target="_top">{T.cta.secondary}</Button>
        </div>
        <p style={{ fontSize: 13, color: C.onDarkMuted, marginTop: 24, letterSpacing: '0.1px' }}>
          {T.cta.finePrint}
        </p>
      </div>
    </section>
  );
}

/* ── TRUSTED-BY STRIP ── (sits between Timeline and ROI calculator)
   Compact authority anchor: real client logos in white cards on a soft band. */
const TRUSTED_LOGOS = [
  { src: '/assets/client-cosateq.webp', alt: 'COSATEQ' },
  { src: '/assets/client-artemis.webp', alt: 'Artemis Law' },
  { src: '/assets/client-objective.webp', alt: 'Objective Realty Aruba' },
  { src: '/assets/client-lalesse.webp', alt: 'Lalesse' },
];

function TrustedByStrip() {
  return (
    <section style={{
      background: C.surfaceSoft,
      padding: '56px 0',
      borderTop: `1px solid ${C.hairlineSoft}`,
      borderBottom: `1px solid ${C.hairlineSoft}`,
    }} data-screen-label="03b TrustedBy">
      <div style={sharedStyles.container}>
        <div style={{
          fontSize: 12, fontWeight: 700, color: C.muted,
          letterSpacing: '1.8px', textTransform: 'uppercase',
          textAlign: 'center', marginBottom: 24,
        }}>
          {T.trustedBy.label}
        </div>
        <div style={{
          display: 'flex', gap: 16, justifyContent: 'center',
          flexWrap: 'wrap', alignItems: 'stretch',
        }} className="trusted-row">
          {TRUSTED_LOGOS.map(l => (
            <div key={l.alt} className="trusted-card" style={{
              flex: '1 1 0', minWidth: 160, maxWidth: 220, height: 88,
              background: C.card,
              borderRadius: 14,
              border: `1px solid ${C.hairlineSoft}`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              padding: '14px 22px', overflow: 'hidden',
              transition: 'transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease',
            }}
              onMouseEnter={e => {
                e.currentTarget.style.transform = 'translateY(-2px)';
                e.currentTarget.style.boxShadow = '0 10px 28px rgba(161,0,255,0.12)';
                e.currentTarget.style.borderColor = 'rgba(161,0,255,0.30)';
              }}
              onMouseLeave={e => {
                e.currentTarget.style.transform = 'translateY(0)';
                e.currentTarget.style.boxShadow = 'none';
                e.currentTarget.style.borderColor = C.hairlineSoft;
              }}
            >
              <img
                src={l.src}
                alt={l.alt}
                loading="lazy"
                style={{
                  maxWidth: '100%', maxHeight: '100%',
                  width: 'auto', height: 'auto',
                  objectFit: 'contain', display: 'block',
                }}
              />
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── APP ROOT ── */
function App() {
  const roiState = useRoiState();
  return (
    <div>
      <TopNav activePage="process" />
      <main>
        <ProcessHero />
        <PhaseSummary />
        <MilestoneTimeline />
        <TrustedByStrip />
        <RoiCalculator state={roiState} />
        <FinalCta />
      </main>
      <Footer />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);