import { Link } from "react-router-dom";
import {
  CheckCircleOutlined,
  ExperimentOutlined,
  SafetyCertificateOutlined,
  ToolOutlined,
} from "@ant-design/icons";
import styles from "./About.module.css";
import SEO from "../../shared/ui/SEO";
import productionImage from "../../assets/images/photo_2026-06-22_23-17-23.jpg";

const facts = [
  { value: "Собственное", label: "производство и техническая база" },
  { value: "Контроль", label: "сырья, геометрии и качества изделий" },
  { value: "Партнерство", label: "с монтажными, торговыми и строительными компаниями" },
];

const principles = [
  {
    icon: <SafetyCertificateOutlined />,
    title: "Надежность",
    text: "Выпускаем продукцию для инженерных систем, где важны стабильные характеристики, аккуратная геометрия и понятная комплектация.",
  },
  {
    icon: <ExperimentOutlined />,
    title: "Контроль качества",
    text: "Следим за производственными этапами, проверяем параметры изделий и бережно относимся к повторяемости каждой партии.",
  },
  {
    icon: <ToolOutlined />,
    title: "Гибкость",
    text: "Помогаем подобрать подходящие позиции под объект, объем закупки и требования проекта, включая контрактное производство.",
  },
];

const About = () => {
  return (
    <>
      <SEO
        title="О компании"
        description="Информация о производственной компании: выпуск ПВХ-продукции, контроль качества, контрактное производство и сотрудничество с партнерами."
      />

      <main className={styles.page}>
        <section className={styles.hero}>
          <div className={styles.heroContent}>
            <span className={styles.kicker}>О компании</span>
            <h1>Производим решения для инженерных и строительных задач</h1>
            <p>
              Мы развиваем современное производство ПВХ-продукции и комплектующих
              для объектов, где важны надежность поставок, понятное качество и
              внимательная работа с заказчиком.
            </p>
            <div className={styles.heroActions}>
              <Link to="/products" className={styles.primaryLink}>
                Смотреть продукцию
              </Link>
              <a href="tel:+79101210962" className={styles.secondaryLink}>
                +7 910 121 09 62
              </a>
            </div>
          </div>

          <div className={styles.heroImageWrap}>
            <img
              src={productionImage}
              alt="Производственная площадка компании"
              className={styles.heroImage}
            />
          </div>
        </section>

        <section className={styles.facts} aria-label="Ключевые факты">
          {facts.map((fact) => (
            <div className={styles.fact} key={fact.value}>
              <strong>{fact.value}</strong>
              <span>{fact.label}</span>
            </div>
          ))}
        </section>

        <section className={styles.story}>
          <div>
            <span className={styles.sectionLabel}>Кто мы</span>
            <h2>Компания, которая держит фокус на производстве и результате</h2>
          </div>
          <div className={styles.storyText}>
            <p>
              Наша команда работает с продукцией для водоснабжения, канализации,
              монтажа и смежных инженерных направлений. Мы понимаем, что для
              клиентов важны не только цена и наличие, но и предсказуемость:
              сроки, качество партии, корректная консультация и спокойная
              коммуникация на каждом этапе заказа.
            </p>
            <p>
              Поэтому мы выстраиваем процессы вокруг практических задач клиента:
              помогаем с подбором номенклатуры, готовим предложения под объем,
              поддерживаем партнеров в регулярных закупках и берем в работу
              запросы на контрактное производство.
            </p>
          </div>
        </section>

        <section className={styles.principles}>
          {principles.map((item) => (
            <article className={styles.principle} key={item.title}>
              <div className={styles.principleIcon}>{item.icon}</div>
              <h3>{item.title}</h3>
              <p>{item.text}</p>
            </article>
          ))}
        </section>

        <section className={styles.production}>
          <div className={styles.productionText}>
            <span className={styles.sectionLabel}>Производство</span>
            <h2>От сырья до готовой партии</h2>
            <p>
              Мы уделяем внимание стабильности технологического процесса,
              состоянию оборудования и качеству готовых изделий. Такой подход
              помогает сохранять повторяемость продукции и уверенно работать как
              с разовыми заказами, так и с постоянными поставками.
            </p>
          </div>
          <ul className={styles.checkList}>
            <li>
              <CheckCircleOutlined />
              Подбираем материалы под назначение продукции
            </li>
            <li>
              <CheckCircleOutlined />
              Контролируем размеры и внешний вид изделий
            </li>
            <li>
              <CheckCircleOutlined />
              Упаковываем продукцию с учетом хранения и доставки
            </li>
            <li>
              <CheckCircleOutlined />
              Работаем с оптовыми, проектными и партнерскими заказами
            </li>
          </ul>
        </section>
      </main>
    </>
  );
};

export default About;