// src/components/InnovationSection/index.tsx
import React from "react";
import styled from "styled-components";
import {
  s_Text40_700 as Text40_700,
  Text24_700 as Text24_700,
  s_f_Text18_400 as Text18_400,
} from "../Typography";
import { useSingleton } from "cms/factory";
import { AsyncReveal } from "../AsyncReveal";

/* ===== Types (должны совпадать с Keystone InnovationSection) ===== */
type CmsSection = {
  id: string;
  title?: string | null;

  topLeftTitle?: string | null;
  topLeftText?: string | null;
  topLeftImage?: { url?: string | null } | null;

  topRightTitle?: string | null;
  topRightText?: string | null;

  bottom1Title?: string | null;
  bottom1Text?: string | null;
  bottom2Title?: string | null;
  bottom2Text?: string | null;
};

/* ===== GraphQL selection ===== */
const SELECTION = `
  id
  title
  topLeftTitle
  topLeftText
  topLeftImage { url }
  topRightTitle
  topRightText
  bottom1Title
  bottom1Text
  bottom2Title
  bottom2Text
`;

/* ===== Component ===== */
const InnovationSection: React.FC = () => {
  const { data, loading, error } = useSingleton<CmsSection>(
    "InnovationSection",
    SELECTION
  );

  const imgUrl = data?.topLeftImage?.url || "/imgs/image_1.png";

  return (
    <Section>
      <TitleRow>
        <Text40_700>
          {data?.title ?? "Innovation at the intersection of telecom and fintech"}
        </Text40_700>
      </TitleRow>

      <AsyncReveal loading={loading} error={error} stagger={0.08} from={12}>
        {/* Верхний ряд */}
        <Row>
          {/* Левая карточка с текстом и отдельным блоком-картинкой */}
          <TopLeftCard>
            <TopLeftInner>
              <TextBox>
                <CardTitle as="h3">
                  {data?.topLeftTitle ?? "Competitive advantage for telecom operators"}
                </CardTitle>
                <CardText>
                  {data?.topLeftText ??
                    "We work with telcos gain a competitive edge in their local markets by integrating advanced fintech services into their offerings, boosting ARPU and enhancing customer loyalty"}
                </CardText>
              </TextBox>
              <ImageBlock>
                <img src={imgUrl} alt="" />
              </ImageBlock>
            </TopLeftInner>
          </TopLeftCard>

          {/* Правая зелёная карточка */}
          <TopRightCard>
            <GreenTitle as="h3">
              {data?.topRightTitle ?? "Telecom & Fintech Synergy"}
            </GreenTitle>
            <GreenText>
              {data?.topRightText ??
                "These two sectors hold enormous untapped potential — we create solutions that unite them and unlock new revenue streams"}
            </GreenText>
          </TopRightCard>
        </Row>

        {/* Нижний ряд */}
        <Row>
          <BottomCard>
            <CardTitle as="h3">
              {data?.bottom1Title ?? "Geographical Expansion"}
            </CardTitle>
            <CardText>
              {data?.bottom1Text ??
                "We accelerate market entry through proven business models and established infrastructure across 22 countries"}
            </CardText>
          </BottomCard>

          <BottomCard>
            <CardTitle as="h3">
              {data?.bottom2Title ?? "World-Class Ecosystem"}
            </CardTitle>
            <CardText>
              {data?.bottom2Text ??
                "The Freedom ecosystem integrates telecom, fintech, e-commerce, and lifestyle services — a turnkey solution for scaling and monetization"}
            </CardText>
          </BottomCard>
        </Row>
      </AsyncReveal>
    </Section>
  );
};

export default InnovationSection;

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

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

const TitleRow = styled.div`
  margin-bottom: 24px;
  @media (min-width: 900px) {
    margin-bottom: 32px;
  }
`;

/* Линия (ряд) — flex, элементы сами делят ширину */
const Row = styled.div`
  display: flex;
  gap: 24px;
  align-items: stretch;
  margin-bottom: 24px;

  @media (max-width: 900px) {
    flex-direction: column;
  }
`;

/* Базовый стиль карточек */
const CardBase = styled.div`
  background: #f5f8fb;
  border-radius: 16px;
  padding: 32px; /* у обычных карточек паддинг 32 */
  color: #1d2023;
  display: flex;
  flex-direction: column;
  justify-content: start;
`;

/* Верхний ряд: min-height только на десктопе */
const TopRowMin = styled(CardBase)`
  @media (min-width: 900px) {
    min-height: 319px;
  }
`;

/* Левая верхняя карточка:
   - без внешних паддингов;
   - паддинг у текста;
   - картинка прижата к нижнему краю, без отступа снизу. */
const TopLeftCard = styled(TopRowMin)`
  padding: 0; /* убираем паддинги у контейнера */
  flex: 1 1 auto; /* занимает доступное место в ряду */
`;

const TopLeftInner = styled.div`
  display: grid;
  grid-template-columns: 1fr;
  height: 100%;
  border-radius: 16px; /* повтор радиуса для правильного обтекания содержимого */

  @media (min-width: 900px) {
    grid-template-columns: 1fr 240px; /* текст + картинка */
    align-items: start; /* картинку вниз */
    gap: 0; /* без промежутка: картинка вплотную к низу */
  }
`;

/* Паддинг переносим на текстовый бокс, а не на карточку */
const TextBox = styled.div`
  padding: 32px;
`;

const ImageBlock = styled.div`
  display: none;

  @media (min-width: 900px) {
    display: block;
    align-self: end; /* прижать вниз */
    justify-self: end;

    img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: contain;
      /* без нижнего отступа — картинка «липнет» к нижнему краю карточки */
    }
  }
`;

/* Правая верхняя (зелёная) карточка — ширина по содержимому с мягким максимумом */
const TopRightCard = styled(TopRowMin)`
  background: #03532f;
  color: #ffffff;
  max-width: 420px;

  @media (max-width: 900px) {
    max-width: 100%;
  }
`;

/* Нижние карточки — делят пространство поровну */
const BottomCard = styled(CardBase)`
  flex: 1 1 0;
`;

/* Типографика */
const CardTitle = styled(Text24_700)`
  color: #1d2023;
  margin-bottom: 8px;
`;

const CardText = styled(Text18_400)`
  color: #1d2023;
`;

const GreenTitle = styled(Text24_700)`
  color: #ffffff;
  margin-bottom: 8px;
`;

const GreenText = styled(Text18_400)`
  color: #ffffff;
`;
