// src/components/ScreenFirst/index.tsx
import styled from "styled-components";
import { Button } from "../Button";
import { Text52_700, Text18_400, Text18_500 } from "../Typography";
import { useSingleton } from "cms/factory";
import { AsyncReveal } from "components/AsyncReveal"; // подправь путь под свой алиас/структуру

type Hero = {
  id: string;
  title?: string | null;
  description?: string | null;
  buttonText?: string | null;
  buttonLink?: string | null;
  backgroundImage?: { url?: string | null } | null;
};

const HERO_SELECTION = `
  id
  title
  description
  buttonText
  buttonLink
  backgroundImage { url }
`;

const ScreenFirstBlock = styled.div`
  width: 100%;
  max-width: 1380px;
  padding: 48px 10px;
  margin: 0 auto;
  display: flex;
  justify-content: center;

  @media (max-width: 768px) {
    padding: 16px 10px;
  }
`;

// transient-prop $bg, чтобы проп не утекал в DOM
const BackgroundCard = styled.div<{ $bg?: string }>`
  width: 1360px;
  height: 640px;
  border-radius: 16px;
  background: ${({ $bg }) =>
    $bg
      ? `url("${$bg}") no-repeat center center / cover`
      : `url("imgs/Backgroung_1.png") no-repeat center center / cover`};

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 48px;
  text-align: center;
  position: relative;
  padding-bottom: 0px;
  overflow: hidden;
`;

const MobileButton = styled(Button)`
  @media (max-width: 768px) {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    width: calc(100% - 32px);

    opacity: 0; /* изначально невидим */
    animation: fadeIn 1s ease forwards;
    animation-delay: 1s; /* первая секунда — скрыт */
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
`;


function ScreenFirst() {
  const { data: hero, loading, error } = useSingleton<Hero>(
    "HeroSection",
    HERO_SELECTION
  );

  const bgUrl = hero?.backgroundImage?.url || undefined;

  return (
    <ScreenFirstBlock id="freedom">
      <BackgroundCard $bg={bgUrl}>
        <AsyncReveal loading={loading} error={error} stagger={0.08} from={12}>
          {/* Покажутся ТОЛЬКО после загрузки, с анимацией */}
          {hero?.title && (
            <Text52_700 style={{ color: "#fff", maxWidth: 600, width: "95%", margin:'0 auto' }}>
              {hero.title}
            </Text52_700>
          )}

          {hero?.description && (
            <Text18_400 style={{ color: "#fff", maxWidth: 480, width: "90%", margin:'0 auto' }}>
              {hero.description}
            </Text18_400>
          )}

          {hero?.buttonText && (
            hero.buttonLink ? (
              <a href={hero.buttonLink} style={{ textDecoration: "none" }}>
                <MobileButton size="large" variant="white">
                  <Text18_500>{hero.buttonText}</Text18_500>
                </MobileButton>
              </a>
            ) : (
              <MobileButton size="large" variant="white">
                <Text18_500>{hero.buttonText}</Text18_500>
              </MobileButton>
            )
          )}
        </AsyncReveal>
      </BackgroundCard>
    </ScreenFirstBlock>
  );
}

export default ScreenFirst;
