/* global React, SectionLabel, ServiceCard */
const { useState: _useStateSv } = React;

function Services() {
  const [isNarrow, setIsNarrow] = _useStateSv(
    typeof window !== 'undefined' ? window.innerWidth < 900 : false
  );
  React.useEffect(() => {
    const onR = () => setIsNarrow(window.innerWidth < 900);
    window.addEventListener('resize', onR);
    return () => window.removeEventListener('resize', onR);
  }, []);

  return (
    <section id="services" data-screen-label="Services" style={{
      background: '#F5F5F5',
      minHeight: '100svh',
      padding: 'clamp(48px, 8vh, 96px) clamp(20px, 4vw, 40px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      boxSizing: 'border-box',
    }}>
      <div style={{
        width: '100%', maxWidth: 1240, margin: '0 auto',
        display: 'grid',
        gridTemplateColumns: isNarrow ? '1fr' : '260px 1fr',
        gap: 'clamp(24px, 3vw, 40px)',
        alignItems: 'stretch',
      }}>
        <div style={{
          display: 'flex', flexDirection: 'column',
          borderLeft: '1px solid rgba(0,0,0,0.15)', paddingLeft: 20,
        }}>
          <SectionLabel style={{ marginBottom: 28 }}>Our Services</SectionLabel>
          <p style={{
            font: '400 clamp(15px, 1.6vw, 18px)/1.4 var(--font-body)',
            color: '#283836', margin: '0 0 48px 0', textWrap: 'pretty',
          }}>
            Tailored solutions designed to bring clarity, control, and precision to your family office operations.
          </p>
          {!isNarrow && (
            <div style={{ width: 188, height: 188, flexShrink: 0, marginTop: 'auto' }}>
              <img src="assets/chevron-arrow.svg" alt=""
                   style={{ width: '100%', height: '100%',
                            filter: 'brightness(0) saturate(100%) invert(18%) sepia(11%) saturate(800%) hue-rotate(120deg) brightness(95%) contrast(85%)',
                            opacity: 0.08 }} />
            </div>
          )}
        </div>

        <div style={{
          display: 'flex', flexDirection: isNarrow ? 'column' : 'row',
          gap: isNarrow ? 16 : 12,
          borderLeft: '1px solid rgba(0,0,0,0.15)', paddingLeft: 20,
        }}>
          <ServiceCard num="01" glyph="customisation" title="Customisation"
            paragraphs={[
              "Due to the nature of the product we're able to provide a customised platform, bespoke to your family office.",
              "This is to reflect that no two family offices are the same due to the investments which they manage and the families they manage funds for.",
              "We enable you to build a data platform which is bespoke and tailored to your needs and requirements.",
            ]} />
          <ServiceCard num="02" glyph="reports" title="Financial Reports"
            paragraphs={[
              "The ability to produce real time reports to share with key stakeholders such as family members, service providers, advisors or accountants.",
              "The reports can be tailored to your requirements and the level of data you want to provide.",
            ]} />
        </div>
      </div>
    </section>
  );
}

window.Services = Services;