/* Reiderstad Invest — Services view (the service pillars in detail) */
function ServicesView({ setView, onBook }) {
  const { Button, Tag, Metric } = window.ReiderstadInvestDesignSystem_6b0242;
  const { Section, Eyebrow, IconCompass, IconHome, IconTools, IconLayers, IconKey, IconCheck } = window;

  const pillars = [
    { icon: IconCompass, n: '01', name: 'Acquisition', lede: 'The foundation of every engagement.',
      body: 'We work from a written brief — use case, budget framework, location priorities — and source through direct relationships rather than public listings. Viewings are curated, not volume-driven.',
      incl: ['Brief development', 'Off-market & pre-market sourcing', '5–8 curated viewings over 2–3 trips', 'Independent valuation & negotiation', 'Due diligence coordination'],
      metric: ['3–9 mo', 'brief signed to closing'] },
    { icon: IconHome, n: '02', name: 'Interior design', lede: 'An extension of how the property gets to ready.',
      body: 'A concept aligned to your actual living pattern, sourced through vetted suppliers across furniture, lighting, art and soft furnishings. You are an occasional reviewer, not a full-time project manager.',
      incl: ['Concept to your living pattern', 'Sourcing through vetted suppliers', 'Installation & styling oversight', 'Continuity with the build phase'],
      metric: ['One', 'shared brief, end to end'] },
    { icon: IconLayers, n: '03', name: 'Rental strategy', lede: 'Modelled honestly, not advertised.',
      body: 'Where you want to rent, we model yield conservatively, assess license eligibility, position the property correctly and coordinate vetted operators. We say so directly when a property is a better lifestyle asset than a rental one.',
      incl: ['Honest yield modelling', 'Holiday-rental license assessment', 'Positioning: managed / private / owner-only', 'Operator & channel coordination', 'Pricing & seasonal optimisation'],
      metric: ['2.5–3.5%', 'net, where headlines say 6%'] },
  ];

  return (
    <main>
      <Section pad="96px 96px 72px">
        <Eyebrow style={{ marginBottom: 28 }}>Services</Eyebrow>
        <h1 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 'clamp(40px, 5vw, 64px)', lineHeight: 1.05, letterSpacing: '-0.025em', margin: 0, maxWidth: 900, color: 'var(--fg)' }}>
          Engage once. Supported across the full <em style={{ fontStyle: 'italic', color: 'var(--accent)' }}>lifecycle</em> of ownership.
        </h1>
        <p style={{ fontFamily: 'var(--font-body)', fontSize: 18, lineHeight: 1.55, color: 'var(--muted-strong)', maxWidth: 620, marginTop: 28 }}>
          Three integrated service pillars under one accountable counterparty. The integrated model is the product — each pillar refers to the others.
        </p>
      </Section>

      {pillars.map((p, i) => (
        <Section key={p.n} dark={i % 2 === 1} pad="88px 96px">
          <div style={{ display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 80, alignItems: 'start' }}>
            <div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 16, marginBottom: 24 }}>
                <p.icon size={28} style={{ color: 'var(--accent)' }} />
                <Eyebrow gold>§ {p.n}</Eyebrow>
              </div>
              <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 40, lineHeight: 1.1, letterSpacing: '-0.02em', margin: '0 0 10px', color: 'var(--fg)' }}>{p.name}</h2>
              <p style={{ fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 20, lineHeight: 1.4, color: 'var(--muted-strong)', margin: '0 0 24px' }}>{p.lede}</p>
              <p style={{ fontFamily: 'var(--font-body)', fontSize: 16, lineHeight: 1.6, color: 'var(--muted-strong)', margin: 0, maxWidth: 540 }}>{p.body}</p>
              <div style={{ marginTop: 40 }}>
                <Metric value={p.metric[0]} label={p.metric[1]} />
              </div>
            </div>
            <div style={{ border: '1px solid var(--hairline)', borderRadius: 'var(--radius-md)', background: 'var(--surface-1)', padding: 32 }}>
              <Eyebrow style={{ marginBottom: 20 }}>What's included</Eyebrow>
              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'grid', gap: 16 }}>
                {p.incl.map((t) => (
                  <li key={t} style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
                    <IconCheck size={18} style={{ color: 'var(--accent)', flexShrink: 0, marginTop: 2 }} />
                    <span style={{ fontFamily: 'var(--font-body)', fontSize: 15, lineHeight: 1.5, color: 'var(--fg)' }}>{t}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        </Section>
      ))}

      <Section pad="96px 96px" style={{ background: 'var(--bg)' }}>
        <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 40, flexWrap: 'wrap' }}>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 400, fontSize: 34, lineHeight: 1.2, letterSpacing: '-0.015em', margin: 0, maxWidth: 620, color: 'var(--fg)' }}>
            Fee structures are shared in writing after a 30-minute scoping call.
          </h2>
          <Button variant="primary" onClick={onBook}>Book a scoping call</Button>
        </div>
      </Section>
    </main>
  );
}
window.ServicesView = ServicesView;