// Trellum — Home + Services pages

const Page = ({ children }) => <main>{children}</main>;

const PageHeadingH1 = React.forwardRef(({ children, style, ...rest }, ref) => (
  <h1 ref={ref} tabIndex={-1} style={{
    fontFamily: 'var(--ff-display)', fontWeight: 400,
    letterSpacing: '-0.015em', margin: 0, outline: 'none',
    ...style,
  }} {...rest}>{children}</h1>
));

// ─────────── HOME ───────────
const Home = ({ setPage, h1Ref }) => (
  <Page>
    {/* HERO */}
    <section style={{
      background: 'var(--teal)',
      padding: 'clamp(96px, 14vh, 160px) 48px clamp(64px, 10vh, 120px)',
      minHeight: 'calc(100vh - 64px)',
      display: 'flex', alignItems: 'center',
    }} className="mob-pad">
      <div style={{ maxWidth: 1100, margin: '0 auto', width: '100%' }}>
        <FadeIn delay={200}>
          <Eyebrow>Built Environment Advisory</Eyebrow>
        </FadeIn>
        <PageHeadingH1 ref={h1Ref} style={{
          fontSize: 'clamp(3rem, 7vw, 5.5rem)', lineHeight: 1.02,
          color: 'var(--paper)', marginTop: 28,
        }}>
          <FadeIn as="span" delay={320} style={{ display: 'block' }}>Contract literacy. Operational depth.</FadeIn>
          <FadeIn as="span" delay={480} duration={620} style={{ display: 'block' }}>
            <em aria-label="Tools the team can keep" style={{ fontStyle: 'italic', color: 'var(--canton)', fontFamily: 'var(--ff-display)' }}>Tools the team can keep.</em>
          </FadeIn>
        </PageHeadingH1>
        <FadeIn delay={1100}>
          <p style={{
            fontFamily: 'var(--ff-body)', fontWeight: 300,
            fontSize: 'clamp(15px, 1.1vw, 17px)', lineHeight: 1.7,
            color: 'rgba(245,245,243,0.78)', maxWidth: 620, margin: '28px 0 0',
          }}>
            Trellum reads the contract, runs the operation, and builds the AI tooling that connects the two. PFI, block management, contract-heavy estates — delivered by an FM operator, not a consultancy.
          </p>
        </FadeIn>
        <FadeIn delay={1200}>
          <p style={{
            fontFamily: 'var(--ff-body)', fontWeight: 300,
            fontSize: 'clamp(13px, 0.95vw, 14px)', lineHeight: 1.7,
            color: 'rgba(245,245,243,0.62)', maxWidth: 620, margin: '20px 0 0',
          }}>
            The output is deployable: prompt libraries that work on the contract you actually hold, automations that fit the systems you actually run, adoption that survives the Monday after training week.
          </p>
        </FadeIn>
        <FadeIn delay={1300} style={{ marginTop: 40, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
          <Button variant="primary" onClick={() => setPage('contact')}>Start a conversation</Button>
          <Button variant="ghostDark" onClick={() => setPage('services')}>See how it works</Button>
        </FadeIn>
        <FadeIn delay={1500} style={{
          marginTop: 'clamp(64px, 10vh, 96px)', paddingTop: 24,
          borderTop: '1px solid rgba(245,245,243,0.12)',
          display: 'flex', flexWrap: 'wrap', gap: 0, alignItems: 'center',
        }}>
          {[
            'PFI & FM contracts',
            'Residential block management',
            'Digital systems',
          ].map((t, i) => (
            <React.Fragment key={t}>
              {i > 0 && <span style={{ color: 'var(--canton)', margin: '0 14px', opacity: 0.7 }}>·</span>}
              <span style={{
                fontFamily: 'var(--ff-body)', fontSize: 11, fontWeight: 400,
                letterSpacing: '0.14em', textTransform: 'uppercase',
                color: 'rgba(245,245,243,0.7)',
              }}>{t}</span>
            </React.Fragment>
          ))}
        </FadeIn>
      </div>
    </section>

    {/* THE CONDITION — capability-led */}
    <section style={{ background: 'var(--paper)', padding: '96px 48px' }} className="mob-pad">
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <InView><SectionLabel>The condition</SectionLabel></InView>
        <InView as="h2" style={{
          fontFamily: 'var(--ff-display)', fontWeight: 400,
          fontSize: 'clamp(2rem, 4vw, 2.75rem)', lineHeight: 1.15,
          letterSpacing: '-0.01em', color: 'var(--slate)', margin: 0, maxWidth: 820,
        }}>
          Adoption work that holds up <Em>on Monday morning.</Em>
        </InView>
        <InView as="p" style={{
          marginTop: 32, fontFamily: 'var(--ff-body)', fontWeight: 300,
          fontSize: 16, lineHeight: 1.75, color: 'var(--charcoal)', maxWidth: 720,
        }}>
          Generic AI rollouts assume an FM team looks like a marketing team or a finance function. They don't. PPM administrators, contract managers and helpdesk supervisors work against contractual obligations, regulated evidence requirements and CAFM systems with their own logic — and the adoption work has to meet them there.
        </InView>
        <InView as="p" style={{
          marginTop: 20, fontFamily: 'var(--ff-body)', fontWeight: 300,
          fontSize: 16, lineHeight: 1.75, color: 'var(--charcoal)', maxWidth: 720,
        }}>
          Trellum builds AI and digital adoption programmes designed for FM workflows, delivered by someone who has run them. Role-specific. Contract-aware. Built to land in the actual job, not the demo.
        </InView>
      </div>
    </section>

    {/* FOUR LAYERS */}
    <section style={{ background: 'var(--teal)', padding: '96px 48px' }} className="mob-pad">
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <InView><Eyebrow>Why Trellum</Eyebrow></InView>
        <InView as="h2" style={{
          fontFamily: 'var(--ff-display)', fontWeight: 400,
          fontSize: 'clamp(2rem, 3.5vw, 2.75rem)', lineHeight: 1.15,
          color: 'var(--paper)', maxWidth: 820, margin: '16px 0 56px',
          letterSpacing: '-0.01em',
        }}>
          Contract literacy, sitting on a career inside the operation. Competency built from the ground up.
        </InView>
        {[
          ['01', 'Commercial', 'Both sides of FM contracts, property and block management. What procurement directors care about. What gets promised versus what gets delivered.'],
          ['02', 'Technical', 'Regulated engineering under statutory permit. Compliance when failure has legal consequence.'],
          ['03', 'Contractual', 'PFI payment mechanisms, performance monitoring, multi-party FM reports. Reading the contract as an operator, not an auditor.'],
          ['04', 'Digital', 'Production AI tooling and bespoke software development. Agentic workflows, prompt engineering, and adoption of new platforms — built and deployed inside live operational environments, not specified from the outside.'],
        ].map(([n, title, body], i) => (
          <InView key={n} style={{
            display: 'grid', gridTemplateColumns: '80px 1fr auto',
            padding: '24px 0',
            borderTop: i === 0 ? '1px solid rgba(191,200,198,0.18)' : 'none',
            borderBottom: '1px solid rgba(191,200,198,0.18)',
            alignItems: 'start',
          }}>
            <div style={{ fontFamily: 'var(--ff-display)', fontStyle: 'italic', fontSize: 36, color: 'var(--canton)', lineHeight: 1 }}>{n}</div>
            <div>
              <div style={{ fontFamily: 'var(--ff-display)', fontSize: 22, color: 'var(--paper)', lineHeight: 1.2 }}>{title}</div>
              <div style={{ fontFamily: 'var(--ff-body)', fontWeight: 300, fontSize: 14, color: 'rgba(245,245,243,0.65)', marginTop: 6, maxWidth: 640, lineHeight: 1.65 }}>{body}</div>
            </div>
            <div />
          </InView>
        ))}
        <InView style={{ marginTop: 64, textAlign: 'right' }}>
          <span style={{
            fontFamily: 'var(--ff-display)', fontStyle: 'italic',
            fontSize: 'clamp(18px, 2vw, 22px)', color: 'var(--canton)',
          }}>
            The combination is the point.
          </span>
        </InView>
      </div>
    </section>

    {/* ENTRY POINTS */}
    <section style={{ background: 'var(--paper)', padding: '96px 48px' }} className="mob-pad">
      <div style={{ maxWidth: 1100, margin: '0 auto' }}>
        <InView><Eyebrow>Three ways in</Eyebrow></InView>
        <InView as="h2" style={{
          fontFamily: 'var(--ff-display)', fontWeight: 400,
          fontSize: 'clamp(2rem, 3.5vw, 2.75rem)', lineHeight: 1.15,
          color: 'var(--slate)', maxWidth: 820, margin: '16px 0 56px',
          letterSpacing: '-0.01em',
        }}>
          Each ends with something <Em>that remains useable.</Em>
        </InView>
        {[
          ['01', 'FM AI Engineering', 'Building AI tooling into FM workflows. Custom GPTs, prompt libraries, agentic workflows, and automations designed for the contract you hold and the systems you run.', ['4–8 weeks', 'Engineering']],
          ['02', 'FM Digital Adoption', 'Targeted adoption work for FM teams who already own the platforms. Role-specific change management — property managers, contract managers, helpdesk supervisors, PPM administrators.', ['3–6 weeks', 'Adoption']],
          ['03', 'Contract & Compliance Intelligence', 'A clause-level read of the obligation — PFI payment mechanism or BSA golden-thread regime. Mapping obligations against the evidence the organisation holds.', ['Scoped', 'PFI & BSA']],
        ].map(([n, title, body, tags], i) => (
          <InView key={n}>
            <RuledRow
              n={n}
              title={title}
              body={body}
              tags={tags}
              onClick={() => setPage('services')}
              first={i === 0}
              cols="60px 1fr auto"
            />
          </InView>
        ))}
      </div>
    </section>

    <CTABand
      eyebrow="Start a conversation"
      heading={<>AI work that meets your FM team <Em>where they actually are.</Em></>}
      body="Trellum runs short, scoped engagements. No retainers, no day rates, no generic rollout. Tell us what your team is being asked to do with AI — we'll tell you whether it'll land."
      primaryLabel="Start a conversation"
      primaryOnClick={() => setPage('contact')}
      secondaryLabel="How Trellum works →"
      secondaryOnClick={() => setPage('approach')}
    />
  </Page>
);

// ─────────── SERVICES ───────────
const Services = ({ setPage, h1Ref }) => {
  const offerings = [
    {
      n: '01', title: 'Digital Readiness Assessment',
      body: 'A structured diagnostic of an FM operation. The assessment reads across systems in use, data quality, compliance posture, and contract literacy, and returns a prioritised roadmap the team can act on. Useful whether or not the engagement continues beyond the diagnostic.',
      tags: ['3–5 days', 'Entry diagnostic'],
      brings: ['CAFM/BMS access', 'Contract documentation or compliance records', "One day of the contract manager's time"],
      receives: ['Written assessment', 'Prioritised roadmap', 'Costed implementation outline'],
    },
    {
      n: '02', title: 'FM AI Engineering',
      body: "Scoped engagements that build AI-powered tooling into FM workflows. Custom GPTs trained on the contract. Prompt libraries specific to PFI payment mechanisms or BSA evidence requirements. Agentic workflows that turn unstructured operational data — emails, reports, helpdesk logs — into structured outputs the team can defend. Built on the platforms the team already owns, whether that's Microsoft 365, Google Workspace, the CAFM, or a direct API integration. Platform-agnostic by design.",
      tags: ['4–8 weeks', 'Engineering'],
      brings: ['Named workflows in scope', 'Access to existing systems', 'Management sponsorship', 'A clear problem to solve'],
      receives: ['Working tools deployed in client environment', 'Documentation the team can extend', "Trained team members who can operate and maintain what's been built"],
    },
    {
      n: '03', title: 'FM Digital Adoption',
      body: "Targeted adoption work for FM teams who already own the platforms. The engagement maps the actual FM tasks consuming the team's week against the platform features that could absorb them, and runs the role-specific change management to land the shift. Property managers, contract managers, helpdesk supervisors, PPM administrators — different roles, different workflows, different adoption paths.",
      tags: ['3–6 weeks', 'Adoption'],
      brings: ['Existing platform access (M365, Google Workspace, CAFM, or equivalent)', 'Named roles and workflows in scope', 'Management sponsorship'],
      receives: ['Role-specific adoption playbook', 'Use-case mapping by role', "Handover register tracking what's been adopted, by whom, with what evidence"],
    },
    {
      n: '04', title: 'Contract & Compliance Intelligence',
      body: "A clause-level read of the obligation — a PFI payment mechanism, a BSA golden-thread regime, or another contract-and-compliance regime where the evidence requirement is heavier than the team's current capacity to meet it. The work maps obligations against the evidence the organisation holds and identifies where the two diverge.",
      tags: ['Scoped per engagement', 'Specialist'],
      brings: ['Contract documentation (PM schedule, lease, or compliance framework)', 'Operational data (helpdesk, PPM records, or compliance register)', 'Named point of contact'],
      receives: ['Named obligation register', 'Evidence gap analysis', 'Remediation owners identified'],
    },
  ];

  return (
    <Page>
      {/* HEADER */}
      <section style={{ background: 'var(--teal)', padding: '96px 48px' }} className="mob-pad">
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          <FadeIn delay={200}><Eyebrow>Services</Eyebrow></FadeIn>
          <FadeIn delay={320}>
            <PageHeadingH1 ref={h1Ref} style={{
              fontSize: 'clamp(2.5rem, 5vw, 3.75rem)', color: 'var(--paper)',
              lineHeight: 1.08, maxWidth: 920, marginTop: 16,
            }}>
              Fixed-fee engagements. Defined scope. <Em>Deployable outputs.</Em>
            </PageHeadingH1>
          </FadeIn>
          <FadeIn delay={1100}>
            <p style={{
              fontFamily: 'var(--ff-body)', fontWeight: 300, fontSize: 17,
              color: 'rgba(245,245,243,0.78)', maxWidth: 640, marginTop: 24, lineHeight: 1.7,
            }}>
              Every engagement ends with an artefact your team can maintain. Not a deck filed after the meeting. Not an ongoing dependency.
            </p>
          </FadeIn>
        </div>
      </section>

      {/* OFFERINGS */}
      <section style={{ background: 'var(--paper)', padding: '96px 48px' }} className="mob-pad">
        <div style={{ maxWidth: 1100, margin: '0 auto' }}>
          {offerings.map((o, i) => (
            <InView key={o.n} style={{
              marginTop: i === 0 ? 0 : 64,
              paddingTop: i === 0 ? 0 : 64,
              borderTop: i === 0 ? 'none' : '1px solid var(--stone)',
              display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56,
            }} className="mob-stack">
              <div>
                <div style={{ fontFamily: 'var(--ff-display)', fontStyle: 'italic', fontSize: 48, color: 'var(--canton)', lineHeight: 1 }}>{o.n}</div>
                <h2 style={{ fontFamily: 'var(--ff-display)', fontSize: 30, color: 'var(--slate)', margin: '8px 0 0', fontWeight: 400, letterSpacing: '-0.01em' }}>{o.title}</h2>
                <p style={{ fontFamily: 'var(--ff-body)', fontWeight: 300, fontSize: 16, color: 'var(--charcoal)', lineHeight: 1.75, marginTop: 20 }}>{o.body}</p>
                <div style={{ marginTop: 24 }}>
                  {o.tags.map((t) => <Tag key={t}>{t}</Tag>)}
                </div>
              </div>
              <div style={{ background: 'var(--stone-light)', padding: 32, borderRadius: 6 }}>
                <Eyebrow>What the client brings</Eyebrow>
                <ul style={{ listStyle: 'none', padding: 0, margin: '14px 0 0' }}>
                  {o.brings.map((b) => (
                    <li key={b} style={{ fontFamily: 'var(--ff-body)', fontWeight: 300, fontSize: 14, color: 'var(--charcoal)', lineHeight: 1.8 }}>· {b}</li>
                  ))}
                </ul>
                <hr style={{ border: 'none', borderTop: '1px solid var(--stone)', margin: '20px 0' }} />
                <Eyebrow>What the client receives</Eyebrow>
                <ul style={{ listStyle: 'none', padding: 0, margin: '14px 0 0' }}>
                  {o.receives.map((b) => (
                    <li key={b} style={{ fontFamily: 'var(--ff-body)', fontWeight: 300, fontSize: 14, color: 'var(--charcoal)', lineHeight: 1.8 }}>· {b}</li>
                  ))}
                </ul>
              </div>
            </InView>
          ))}
        </div>
      </section>

      {/* PRACTICE LINKS */}
      <section style={{ background: 'var(--paper)', padding: '96px 48px' }} className="mob-pad">
        <div style={{ maxWidth: 1100, margin: '0 auto', paddingTop: 48, borderTop: '1px solid var(--stone)' }}>
          <InView><Eyebrow>Practice areas</Eyebrow></InView>
          <InView as="h2" style={{
            fontFamily: 'var(--ff-display)', fontSize: 'clamp(1.75rem, 3vw, 2.25rem)',
            color: 'var(--slate)', margin: '12px 0 16px', fontWeight: 400,
            letterSpacing: '-0.01em', lineHeight: 1.2, maxWidth: 820,
          }}>
            Where Trellum&apos;s work concentrates.
          </InView>
          <InView as="p" style={{
            fontFamily: 'var(--ff-body)', fontWeight: 300, fontSize: 16,
            color: 'var(--charcoal)', lineHeight: 1.7, maxWidth: 680, margin: '0 0 36px',
          }}>
            Trellum&apos;s contract and compliance work is most active in two areas of the built environment.
          </InView>
          <div style={{ marginTop: 28 }}>
            <InView>
              <RuledRow n="01" first title="PFI & FM contracts" body="Payment mechanism literacy for the side of the table that carries the risk." onClick={() => setPage('pfi')} cols="60px 1fr auto" />
            </InView>
            <InView>
              <RuledRow n="02" title="Residential block management" body="Golden-thread evidence the Accountable Person can defend at a safety-case review." onClick={() => setPage('block')} cols="60px 1fr auto" />
            </InView>
          </div>
        </div>
      </section>

      <CTABand
        eyebrow="Start with a diagnostic"
        heading={<>The Digital Readiness Assessment tells you where <Em>to start.</Em></>}
        body="Three to five days. A written output. Useful whether or not you proceed."
        primaryLabel="Request an assessment"
        primaryOnClick={() => setPage('contact')}
      />
    </Page>
  );
};

Object.assign(window, { Page, PageHeadingH1, Home, Services });