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

/* ========= CMS types & selection ========= */
type CmsItem = {
  id: string;
  text: string;
  order: number;
};

type CmsSection = {
  id: string;
  title?: string | null;
  leftTitle?: string | null;
  ctaText?: string | null;
  ctaLink?: string | null;
  leftBackground?: { url?: string | null } | null;
  items: CmsItem[];
};

const SELECTION = `
  id
  title
  leftTitle
  ctaText
  ctaLink
  leftBackground { url }
  items(orderBy: { order: asc }) { id text order }
`;

/* ========= Props ========= */
type WhyChooseUsProps = {
  items?: string[];
  ctaText?: string;
  leftTitle?: string;
};

const WhyChooseUs: React.FC<WhyChooseUsProps> = ({
  ctaText = "Partner with us",
  leftTitle = "Seasoned executives with decades of experience in telecom and consulting",
  items = [
    "A ready, proven service ecosystem",
    "Direct mandate by the Chairman of FRHC",
    "Flexible solutions tailored to operator needs",
  ],
}) => {
  const { data, loading, error } = useSingleton<CmsSection>(
    "WhyChooseUsSection",
    SELECTION
  );

  const bgUrl = data?.leftBackground?.url || "/imgs/Backgroung_2.png";
  const uiTitle = data?.title || "Why Choose Us";
  const uiLeftTitle = data?.leftTitle || leftTitle;
  const uiCtaText = data?.ctaText || ctaText;
  const uiCtaLink = data?.ctaLink || undefined;
  const uiItems =
    (data?.items?.length ? data.items.map((i) => i.text) : items) ?? [];

  return (
    <Section id="why_choose_us">
      <AsyncReveal loading={loading} error={error}>
        <TitleRow>
          <Text40_700>{uiTitle}</Text40_700>
        </TitleRow>

        <Grid>
          {/* Левая карточка (фон из CMS/фолбэк) */}
          <LeftCard $bg={bgUrl}>
            <LeftInner>
              <LeftTitle as="h3" style={{ textAlign:'left'}}>{uiLeftTitle}</LeftTitle>
              <div id="btn">
                {uiCtaLink ? (
                  <a href={uiCtaLink} style={{ textDecoration: "none" }}>
                    <Button size="large" variant="green">
                      {uiCtaText}
                    </Button>
                  </a>
                ) : (
                  <Button size="large" variant="green">{uiCtaText}</Button>
                )}
              </div>
            </LeftInner>
          </LeftCard>

          {/* Правая колонка */}
          <RightCol>
            {uiItems.map((t, i) => (
              <RightCard key={i}>
                <Text24_700 style={{ color: "#1D2023", textAlign:'left' }}>{t}</Text24_700>
              </RightCard>
            ))}
          </RightCol>
        </Grid>
      </AsyncReveal>
    </Section>
  );
};

export default WhyChooseUs;

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

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

const TitleRow = styled.div`
  margin-bottom: 48px;
`;

const Grid = styled.div`
  display: grid;
  grid-template-columns: 1fr 420px; /* правая колонка фикс, левая растёт */
  gap: 32px;
  align-items: stretch;

  @media (max-width: 900px) {
    grid-template-columns: 1fr; /* мобилка — одна колонка */
  }
`;

/* transient prop для фона */
const LeftCard = styled.div<{ $bg?: string }>`
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  background-image: ${({ $bg }) =>
    $bg ? `url('${$bg}')` : `url('/imgs/Backgroung_2.png')`};
  background-size: cover;
  background-position: center;

  /* тёмный градиент для читаемости */
  &::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.25) 100%);
    pointer-events: none;
  }

  @media (max-width: 900px) {
    height: 424px; /* мобилка — фикс высота */
  }
`;

const LeftInner = styled.div`
  position: absolute;
  inset: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* заголовок сверху, кнопка внизу */
  z-index: 1;
  @media (max-width: 768px) {
    #btn{
      width:100% !importan;
    }
    #btn > a,#btn > button{
      width:100%;
    }
  }
`;

const LeftTitle = styled(Text24_700)`
  color: #ffffff;
  max-width: 80%;
`;

const RightCol = styled.div`
  display: flex;
  flex-direction: column;
  gap: 32px;
`;

const RightCard = styled.div`
  background: #f5f8fb;
  color: #1d2023;
  border-radius: 16px;
  padding: 32px;

  @media (max-width: 480px) {
    padding: 24px;
  }
`;
