// Shared page shell + data-driven sub-pages for /services/* and /for/*
// Pattern: SubHero → ObservationGrid (paper) → ProcessRail (ink) → StatRow → DeliverablesList → FaqList → FitLine → SubCTA

// ---------- Shared primitives ----------

const pageStyles = {
  wrap: { maxWidth: 1200, margin: '0 auto', padding: '0 40px' },
  wrapNarrow: { maxWidth: 880, margin: '0 auto', padding: '0 40px' },
  eyebrow: {
    fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.14em',
    textTransform:'uppercase', color:'var(--ink-3)',
    display:'flex', alignItems:'center', gap:10
  },
  eyebrowInk: {
    fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.14em',
    textTransform:'uppercase', color:'rgba(245,241,232,0.55)',
    display:'flex', alignItems:'center', gap:10
  },
  dot: { width:5, height:5, borderRadius:'50%', background:'var(--accent)', flex:'none' },
  h2: {
    fontFamily:'var(--serif)', fontSize:'clamp(40px, 5.5vw, 68px)',
    lineHeight:1.04, letterSpacing:'-0.025em', fontWeight:400,
    margin:'16px 0 28px', textWrap:'balance'
  },
  h2Medium: {
    fontFamily:'var(--serif)', fontSize:'clamp(32px, 4vw, 48px)',
    lineHeight:1.08, letterSpacing:'-0.02em', fontWeight:400,
    margin:'16px 0 24px', textWrap:'balance'
  },
  body: {
    fontFamily:'var(--sans)', fontSize:22, lineHeight:1.5,
    color:'var(--ink-2)', maxWidth:640, margin:0, fontWeight:400
  },
  sig: {
    fontFamily:'var(--mono)', fontSize:12, letterSpacing:'0.04em',
    color:'var(--ink-3)', marginTop:20
  },
};

// ---------- SubHero: paper, short, eyebrow-dot + two-line display + body + sig + CTA ----------

const SubHero = ({ eyebrow, h2Line1, h2Line2, body, sig, ctaHref }) => (
  <section className="sub-page-section" style={{background:'var(--paper)', padding:'160px 0 100px', borderBottom:'1px solid var(--rule)'}}>
    <div style={pageStyles.wrap}>
      <div style={pageStyles.eyebrow}><span style={pageStyles.dot}/>{eyebrow}</div>
      <h1 style={{...pageStyles.h2, maxWidth:900}}>
        {h2Line1}<br/>
        <span style={{fontStyle:'italic', color:'var(--ink-2)'}}>{h2Line2}</span>
      </h1>
      <p style={pageStyles.body}>{body}</p>
      {sig && <div style={pageStyles.sig}>↳ {sig}</div>}
      <div style={{marginTop:40}}>
        <a href={ctaHref || 'https://cal.com/travisross/15min'} target="_blank" rel="noopener"
           className="cta-primary">
          Book the free CRM audit <span style={{marginLeft:8}}>↗</span>
        </a>
      </div>
    </div>
  </section>
);

// ---------- ObservationGrid: paper, intro paragraph + 2×2 hairline cards ----------

const ObservationGrid = ({ eyebrow, h2, intro, cards }) => (
  <section style={{background:'var(--paper)', padding:'100px 0', borderBottom:'1px solid var(--rule)'}}>
    <div style={pageStyles.wrap}>
      <div style={pageStyles.eyebrow}><span style={pageStyles.dot}/>{eyebrow}</div>
      <h2 style={{...pageStyles.h2Medium, maxWidth:760}}>{h2}</h2>
      {intro && <p style={{fontFamily:'var(--serif)', fontSize:20, lineHeight:1.55, color:'var(--ink-2)', maxWidth:720, margin:'0 0 56px'}}>{intro}</p>}
      <div style={{
        display:'grid', gridTemplateColumns:'repeat(2, 1fr)',
        border:'1px solid var(--rule)', background:'var(--rule)',
        gap:1, marginTop:20
      }} className="obs-grid">
        {cards.map((c, i) => (
          <div key={i} style={{background:'var(--paper)', padding:'44px 40px'}}>
            <div style={{...pageStyles.eyebrow, fontSize:10, marginBottom:20}}>
              <span style={{...pageStyles.dot, background:'var(--ink-3)'}}/>
              {c.tag || `Observation ${String.fromCharCode(65+i)}`}
            </div>
            <h3 style={{fontFamily:'var(--serif)', fontSize:24, lineHeight:1.2, fontWeight:400, margin:'0 0 14px', letterSpacing:'-0.01em'}}>
              {c.h3}
            </h3>
            <p style={{fontFamily:'var(--sans)', fontSize:16, lineHeight:1.6, color:'var(--ink-2)', margin:0}}>
              {c.body}
            </p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ---------- ProcessRail: ink, numbered steps in vertical rail ----------

const ProcessRail = ({ eyebrow, h2, subhead, steps }) => (
  <section style={{background:'var(--ink)', color:'var(--paper)', padding:'120px 0', borderBottom:'1px solid var(--rule-light)'}}>
    <div style={pageStyles.wrap}>
      <div style={pageStyles.eyebrowInk}><span style={pageStyles.dot}/>{eyebrow}</div>
      <h2 style={{...pageStyles.h2, color:'var(--paper)', maxWidth:900}}>{h2}</h2>
      {subhead && <p style={{fontFamily:'var(--mono)', fontSize:13, letterSpacing:'0.02em', color:'rgba(245,241,232,0.6)', maxWidth:600, margin:'0 0 72px', lineHeight:1.6}}>{subhead}</p>}
      <div style={{display:'flex', flexDirection:'column'}}>
        {steps.map((s, i) => (
          <div key={i} style={{
            display:'grid',
            gridTemplateColumns:'180px 1fr',
            gap:48,
            padding:'36px 0',
            borderTop: i === 0 ? 'none' : '1px solid var(--rule-light)'
          }} className="rail-row">
            <div>
              <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.14em', color:'var(--accent)', marginBottom:10}}>
                {String(i+1).padStart(2,'0')} · {s.tag.toUpperCase()}
              </div>
              <div style={{fontFamily:'var(--serif)', fontSize:72, fontWeight:300, lineHeight:1, letterSpacing:'-0.03em', color:'rgba(245,241,232,0.25)'}}>
                {String(i+1).padStart(2,'0')}
              </div>
            </div>
            <div>
              <h3 style={{fontFamily:'var(--serif)', fontSize:30, lineHeight:1.15, fontWeight:400, margin:'12px 0 14px', letterSpacing:'-0.015em'}}>
                {s.h3}
              </h3>
              <p style={{fontFamily:'var(--sans)', fontSize:17, lineHeight:1.6, color:'rgba(245,241,232,0.75)', margin:0, maxWidth:620}}>
                {s.body}
              </p>
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ---------- StatRow: paper, mono tabular row with labels ----------

const StatRow = ({ eyebrow, stats }) => (
  <section style={{background:'var(--paper)', padding:'80px 0', borderBottom:'1px solid var(--rule)'}}>
    <div style={pageStyles.wrap}>
      <div style={{...pageStyles.eyebrow, marginBottom:40}}><span style={pageStyles.dot}/>{eyebrow}</div>
      <div style={{
        display:'grid',
        gridTemplateColumns:`repeat(${stats.length}, 1fr)`,
        borderTop:'1px solid var(--rule)',
        borderBottom:'1px solid var(--rule)',
        background:'var(--rule)', gap:1
      }} className="stat-grid">
        {stats.map((s, i) => (
          <div key={i} style={{background:'var(--paper)', padding:'28px 24px'}}>
            <div style={{fontFamily:'var(--serif)', fontSize:40, lineHeight:1.1, fontWeight:400, letterSpacing:'-0.02em', marginBottom:12}}>
              {s.n}
            </div>
            <div style={{fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.14em', color:'var(--ink-3)', textTransform:'uppercase'}}>
              {s.label}
            </div>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ---------- DeliverablesList: paper, numbered list ----------

const DeliverablesList = ({ eyebrow, h2, items }) => (
  <section style={{background:'var(--paper)', padding:'100px 0', borderBottom:'1px solid var(--rule)'}}>
    <div style={pageStyles.wrap}>
      <div style={pageStyles.eyebrow}><span style={pageStyles.dot}/>{eyebrow}</div>
      <h2 style={{...pageStyles.h2Medium, maxWidth:700}}>{h2}</h2>
      <ol style={{
        listStyle:'none', padding:0, margin:'40px 0 0',
        display:'grid', gridTemplateColumns:'repeat(2, 1fr)', gap:0,
        borderTop:'1px solid var(--rule)'
      }} className="deliverables-grid">
        {items.map((t, i) => (
          <li key={i} style={{
            display:'grid', gridTemplateColumns:'56px 1fr', gap:20,
            padding:'24px 24px 24px 0',
            borderBottom:'1px solid var(--rule)',
            borderRight: i % 2 === 0 ? '1px solid var(--rule)' : 'none'
          }}>
            <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.1em', color:'var(--accent)', paddingTop:6}}>
              {String(i+1).padStart(2,'0')}
            </div>
            <div style={{fontFamily:'var(--serif)', fontSize:19, lineHeight:1.4, color:'var(--ink-1)'}}>
              {t}
            </div>
          </li>
        ))}
      </ol>
    </div>
  </section>
);

// ---------- FaqList: paper, prose blocks with hairline rules ----------

const FaqList = ({ eyebrow, items }) => (
  <section style={{background:'var(--paper)', padding:'100px 0', borderBottom:'1px solid var(--rule)'}}>
    <div style={pageStyles.wrapNarrow}>
      <div style={pageStyles.eyebrow}><span style={pageStyles.dot}/>{eyebrow}</div>
      <h2 style={{...pageStyles.h2Medium, marginBottom:48}}>Common questions.</h2>
      <div>
        {items.map((qa, i) => (
          <div key={i} style={{padding:'32px 0', borderTop: i === 0 ? '1px solid var(--rule)' : '1px solid var(--rule)', borderBottom: i === items.length - 1 ? '1px solid var(--rule)' : 'none'}}>
            <h3 style={{fontFamily:'var(--serif)', fontSize:22, lineHeight:1.3, fontWeight:500, margin:'0 0 14px', letterSpacing:'-0.01em'}}>
              {qa.q}
            </h3>
            <p style={{fontFamily:'var(--sans)', fontSize:17, lineHeight:1.65, color:'var(--ink-2)', margin:0, maxWidth:680}}>
              {qa.a}
            </p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ---------- FitLine: bone, one-line sig pointing to related pages ----------

const FitLine = ({ text }) => (
  <section style={{background:'var(--bone)', padding:'60px 0', borderBottom:'1px solid var(--rule)'}}>
    <div style={pageStyles.wrap}>
      <div style={{fontFamily:'var(--mono)', fontSize:13, letterSpacing:'0.02em', color:'var(--ink-2)', lineHeight:1.6}}>
        ↳ {text}
      </div>
    </div>
  </section>
);

// ---------- SubCTA: ink, closing block ----------

const SubCTA = ({ h2Line1, h2Line2, body }) => (
  <section style={{background:'var(--ink)', color:'var(--paper)', padding:'120px 0'}}>
    <div style={pageStyles.wrap}>
      <div style={pageStyles.eyebrowInk}><span style={pageStyles.dot}/>Next step</div>
      <h2 style={{...pageStyles.h2, color:'var(--paper)', maxWidth:900}}>
        {h2Line1}<br/>
        <span style={{fontStyle:'italic', color:'rgba(245,241,232,0.75)'}}>{h2Line2}</span>
      </h2>
      <p style={{fontFamily:'var(--mono)', fontSize:13, letterSpacing:'0.02em', color:'rgba(245,241,232,0.65)', maxWidth:640, lineHeight:1.7, margin:'0 0 40px'}}>
        {body}
      </p>
      <div style={{display:'flex', gap:24, alignItems:'center', flexWrap:'wrap'}}>
        <a href="https://cal.com/travisross/15min" target="_blank" rel="noopener" className="cta-primary">
          Book the free CRM audit <span style={{marginLeft:8}}>↗</span>
        </a>
        <a href="mailto:travis@conceptoutbound.com" style={{fontFamily:'var(--mono)', fontSize:12, letterSpacing:'0.1em', textTransform:'uppercase', color:'rgba(245,241,232,0.7)', textDecoration:'underline', textUnderlineOffset:4}}>
          Or email travis@conceptoutbound.com ✉
        </a>
      </div>
    </div>
  </section>
);

// ---------- Hub page card grid (services + for) ----------

const HubGrid = ({ cards, columns = 2 }) => (
  <section style={{background:'var(--ink)', color:'var(--paper)', padding:'100px 0', borderBottom:'1px solid var(--rule-light)'}}>
    <div style={pageStyles.wrap}>
      <div style={{
        display:'grid',
        gridTemplateColumns:`repeat(${columns}, 1fr)`,
        background:'var(--rule-light)',
        border:'1px solid var(--rule-light)',
        gap:1
      }} className="hub-grid">
        {cards.map((c, i) => (
          <a key={i} href={c.href} className="hub-card" style={{
            background:'var(--ink)', padding:'48px 40px',
            textDecoration:'none', color:'inherit',
            display:'flex', flexDirection:'column', gap:20,
            transition:'background 180ms'
          }}>
            <div style={{display:'flex', justifyContent:'space-between', alignItems:'start'}}>
              <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.14em', color:'var(--accent)', textTransform:'uppercase'}}>
                {c.eyebrow}
              </div>
              <div style={{fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.14em', color:'rgba(245,241,232,0.4)'}}>
                {String(i+1).padStart(2,'0')} / {String(cards.length).padStart(2,'0')}
              </div>
            </div>
            <h3 style={{fontFamily:'var(--serif)', fontSize:28, lineHeight:1.2, fontWeight:400, margin:0, letterSpacing:'-0.015em', color:'var(--paper)', minHeight:76}}>
              {c.h3}
            </h3>
            <p style={{fontFamily:'var(--sans)', fontSize:15, lineHeight:1.6, color:'rgba(245,241,232,0.7)', margin:0}}>
              {c.body}
            </p>
            <div style={{fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.08em', color:'rgba(245,241,232,0.55)', textTransform:'uppercase', marginTop:'auto', paddingTop:20, borderTop:'1px solid var(--rule-light)'}}>
              {c.stats}
            </div>
            <div style={{fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.1em', color:'var(--accent)', textTransform:'uppercase'}}>
              ↳ {c.cta}
            </div>
          </a>
        ))}
      </div>
    </div>
  </section>
);

Object.assign(window, {
  SubHero, ObservationGrid, ProcessRail, StatRow, DeliverablesList,
  FaqList, FitLine, SubCTA, HubGrid, pageStyles
});