// src/sections/CountriesSection.tsx
import React from "react";
import styled from "styled-components";
import {
  s_Text40_700 as Text40_700,
  s_f_Text18_400 as Text18_400,
} from "../Typography";

import CountriesMap from "../CountriesMap";

const CountriesSection: React.FC = () => {
  return (
    <Section>
      <Header>
        <Text40_700>Countries</Text40_700>
        <SubTitle>
          Offices in 22 countries, including the USA, the Middle East, Europe, and Central Asia
        </SubTitle>
      </Header>

      {/* Карта — берём готовый компонент как есть */}
      <MapWrap>
        <CountriesMap />
      </MapWrap>
    </Section>
  );
};

export default CountriesSection;

/* ============== styles ============== */

const Section = styled.section`
  width: 100%;
  max-width: 1220px;
  margin: 0 auto;
  padding: 64px 10px 64px;
  @media (max-width: 768px) {
    padding: 48px 10px;
  }
`;

const Header = styled.div`
  margin-bottom: 16px;

  @media (min-width: 900px) {
    margin-bottom: 48px;
  }
`;

const SubTitle = styled(Text18_400)`
  margin-top: 8px;
  color: #24303B; /* спокойный серый; при желании подменишь на нужный токен */
`;

/* Внутри CountriesMap уже есть свой фон/радиус,
   здесь лишь страхуемся от переполнения */
const MapWrap = styled.div`
  overflow: hidden;
  border-radius: 16px;
`;
