import { useCallback, useEffect, useRef, useState } from "react";
import Image from "next/image";
import Link from "next/link";

import { getAllPosts } from "@/lib/api";
import type { Post } from "@/types";

const MAX_LATEST_POSTS = 3;

// Responsive padding - small on mobile, large on desktop
const getPadding = () => {
  if (typeof window === "undefined") return { left: 0, right: 0 };
  const width = window.innerWidth;
  if (width < 1024) {
    // Mobile/tablet: minimal padding
    return { left: 20, right: 20 };
  }
  // Desktop: large padding for fade effect
  return { left: 450, right: 750 };
};

interface HomePageProps {
  latestPosts: Post[];
}

export default function HomePage({ latestPosts = [] }: HomePageProps) {
  const carouselRef = useRef<HTMLDivElement>(null);
  const carouselInnerRef = useRef<HTMLDivElement>(null);
  const [isHovered, setIsHovered] = useState(false);
  const [isUserScrolling, setIsUserScrolling] = useState(false);
  const [isInitialized, setIsInitialized] = useState(false);
  const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
  const animationFrameRef = useRef<number | null>(null);
  const isAutoScrollingRef = useRef(false);

  // Initialize carousel scroll position
  useEffect(() => {
    const carousel = carouselRef.current;
    const inner = carouselInnerRef.current;
    if (!carousel || !inner) return;

    let attempts = 0;
    const maxAttempts = 100;

    const initializeScroll = () => {
      attempts++;
      // Wait for carousel to have proper dimensions
      if (carousel.scrollWidth > 0 && inner.children.length > 0) {
        const padding = getPadding();
        carousel.scrollLeft = padding.left;
        setIsInitialized(true);
      } else if (attempts < maxAttempts) {
        // Retry if not ready
        requestAnimationFrame(initializeScroll);
      }
    };

    // Start initialization after a brief delay
    const timeoutId = setTimeout(() => {
      requestAnimationFrame(initializeScroll);
    }, 50);

    return () => {
      clearTimeout(timeoutId);
    };
  }, []);

  const shiftCardsForward = useCallback(() => {
    const carousel = carouselRef.current;
    const inner = carouselInnerRef.current;
    if (!carousel || !inner || inner.children.length === 0) return;

    let shifted = false;

    // When scrolling right, check if we need more cards on the right
    while (true) {
      const lastCard = inner.lastElementChild as HTMLElement | null;
      if (!lastCard) break;

      // Check if the last card is visible or about to be visible
      const cardRect = lastCard.getBoundingClientRect();
      const carouselRect = carousel.getBoundingClientRect();

      // If last card's left edge is within viewport, we need more cards on the right
      // Move first card to the end
      if (cardRect.left < carouselRect.right) {
        const firstCard = inner.firstElementChild as HTMLElement | null;
        if (!firstCard || firstCard === lastCard) break;

        const cardWidth = firstCard.offsetWidth + 16; // 16px gap
        carousel.scrollLeft -= cardWidth;
        inner.appendChild(firstCard);
        shifted = true;
      } else {
        break;
      }
    }

    if (shifted) {
      isAutoScrollingRef.current = true;
      requestAnimationFrame(() => {
        isAutoScrollingRef.current = false;
      });
    }
  }, []);

  const shiftCardsBackward = useCallback(() => {
    const carousel = carouselRef.current;
    const inner = carouselInnerRef.current;
    if (!carousel || !inner || inner.children.length === 0) return;

    let shifted = false;

    // When scrolling left, check if we need more cards on the left
    while (true) {
      const firstCard = inner.firstElementChild as HTMLElement | null;
      if (!firstCard) break;

      // Check if the first card is visible or about to be visible
      const cardRect = firstCard.getBoundingClientRect();
      const carouselRect = carousel.getBoundingClientRect();

      // If first card's right edge is within viewport, we need more cards on the left
      // Move last card to the beginning
      if (cardRect.right > carouselRect.left) {
        const lastCard = inner.lastElementChild as HTMLElement | null;
        if (!lastCard || lastCard === firstCard) break;

        const cardWidth = lastCard.offsetWidth + 16; // 16px gap
        carousel.scrollLeft += cardWidth;
        inner.insertBefore(lastCard, inner.firstChild);
        shifted = true;
      } else {
        break;
      }
    }

    if (shifted) {
      isAutoScrollingRef.current = true;
      requestAnimationFrame(() => {
        isAutoScrollingRef.current = false;
      });
    }
  }, []);

  // Auto-scroll animation (disabled)
  // useEffect(() => {
  //   const carousel = carouselRef.current;
  //   if (!carousel || !isInitialized || isHovered || isUserScrolling) return;

  //   const scrollSpeed = 0.5; // pixels per frame

  //   const animate = () => {
  //     const currentCarousel = carouselRef.current;
  //     if (currentCarousel && !isHovered && !isUserScrolling) {
  //       isAutoScrollingRef.current = true;
  //       currentCarousel.scrollLeft += scrollSpeed;
  //       shiftCardsForward();
  //       isAutoScrollingRef.current = false;
  //       animationFrameRef.current = requestAnimationFrame(animate);
  //     }
  //   };

  //   animationFrameRef.current = requestAnimationFrame(animate);

  //   return () => {
  //     if (animationFrameRef.current) {
  //       cancelAnimationFrame(animationFrameRef.current);
  //     }
  //   };
  // }, [isInitialized, isHovered, isUserScrolling, shiftCardsForward]);

  // Handle manual scrolling (trackpad, touch, mouse wheel)
  useEffect(() => {
    const carousel = carouselRef.current;
    if (!carousel) return;

    let lastScrollLeft = carousel.scrollLeft;
    let scrollTimeout: NodeJS.Timeout | null = null;

    const handleScroll = () => {
      // Ignore scroll events from auto-scroll
      if (isAutoScrollingRef.current) return;

      const currentScrollLeft = carousel.scrollLeft;

      // Check if user scrolled (need larger threshold to avoid auto-scroll noise)
      if (Math.abs(currentScrollLeft - lastScrollLeft) > 5) {
        // Determine direction and shift cards
        if (currentScrollLeft > lastScrollLeft) {
          // Scrolling right
          shiftCardsForward();
        } else if (currentScrollLeft < lastScrollLeft) {
          // Scrolling left
          shiftCardsBackward();
        }

        lastScrollLeft = currentScrollLeft;

        // Pause auto-scroll
        setIsUserScrolling(true);

        // Clear existing timeout
        if (scrollTimeout) {
          clearTimeout(scrollTimeout);
        }

        // Resume auto-scroll after 2 seconds
        scrollTimeout = setTimeout(() => {
          setIsUserScrolling(false);
          lastScrollLeft = carousel.scrollLeft;
        }, 2000);
      }
    };

    carousel.addEventListener("scroll", handleScroll, { passive: true });

    return () => {
      carousel.removeEventListener("scroll", handleScroll);
      if (scrollTimeout) {
        clearTimeout(scrollTimeout);
      }
    };
  }, [shiftCardsBackward, shiftCardsForward]);

  // Handle window resize to adjust carousel padding dynamically
  useEffect(() => {
    const carousel = carouselRef.current;
    if (!carousel) return;

    const handleResize = () => {
      // Reset scroll position to account for new padding
      const padding = getPadding();
      carousel.scrollLeft = padding.left;
    };

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return (
    <>
      <style jsx global>{`
        html {
          font-size: 16px !important;
        }
        @keyframes scroll-right {
          from {
            transform: translateX(0);
          }
          to {
            transform: translateX(calc(-280px * 6 - 40px * 6));
          }
        }
        @keyframes scroll-right-md {
          from {
            transform: translateX(0);
          }
          to {
            transform: translateX(calc(-533px * 6 - 40px * 6));
          }
        }
        .animate-scroll-right {
          animation: scroll-right 25s linear infinite;
        }
        @media (min-width: 768px) {
          .animate-scroll-right {
            animation: scroll-right-md 25s linear infinite;
          }
        }
        .office-card:hover .office-image img {
          transform: scale(1.2);
        }
        .office-image img {
          transition: transform 700ms ease-out;
          will-change: transform;
        }
        @media (min-width: 768px) {
          .music-value-image {
            position: absolute;
            top: 60px;
            right: 25%;
            width: 324px;
            height: 324px;
            transform: translate(0, 0) rotate(8deg);
            opacity: 0;
            transition: all 700ms ease-out;
            pointer-events: none;
            z-index: 0;
          }
          .music-value:hover .music-value-image {
            transform: translate(11px, 17px) rotate(8deg);
            opacity: 1;
          }
          .music-value > div:not(.music-value-image),
          .music-value > p {
            position: relative;
            z-index: 1;
          }
          section > div > div[class*="mb-16"] {
            position: relative;
            z-index: 1;
          }
          .impatience-value-image {
            position: absolute;
            top: 60px;
            left: 15%;
            width: 244px;
            height: 220px;
            transform: translate(0, 0) rotate(-8deg);
            opacity: 0;
            transition: all 700ms ease-out;
            pointer-events: none;
            z-index: 2;
          }
          .impatience-value:hover .impatience-value-image {
            transform: translate(11px, 17px) rotate(-8deg);
            opacity: 1;
          }
          .aesthetics-value-image {
            position: absolute;
            bottom: -60%;
            right: 30%;
            width: 324px;
            height: 324px;
            transform: translate(0, 0) rotate(8deg);
            opacity: 0;
            transition: all 700ms ease-out;
            pointer-events: none;
            z-index: 2;
          }
          .aesthetics-value:hover .aesthetics-value-image {
            transform: translate(11px, 17px) rotate(8deg);
            opacity: 1;
          }
          .fun-value-image {
            position: absolute;
            top: 50%;
            left: 40%;
            width: 210px;
            height: 220px;
            transform: translate(0, -50%) rotate(-8deg);
            opacity: 0;
            transition: all 700ms ease-out;
            pointer-events: none;
            z-index: 2;
          }
          .fun-value:hover .fun-value-image {
            transform: translate(11px, calc(-50% + 17px)) rotate(-8deg);
            opacity: 1;
          }
        }
        .people-card {
          transition: all 300ms ease-out;
        }
        .people-card:hover {
          background-color: #e87722;
        }
        .people-card:hover .people-card-description {
          transform: translateY(8px);
        }
        .people-card:hover .people-card-footer {
          transform: translateY(-8px);
        }
        .people-card-description,
        .people-card-footer {
          transition: transform 300ms ease-out;
        }
        .people-carousel-container {
          scrollbar-width: none; /* Firefox */
          -ms-overflow-style: none; /* IE and Edge */
        }
        .people-carousel-container::-webkit-scrollbar {
          display: none; /* Chrome, Safari, Opera */
        }
        @keyframes pulse-glow {
          0%,
          100% {
            opacity: 0.6;
            transform: scale(0.95);
          }
          50% {
            opacity: 1;
            transform: scale(1.05);
          }
        }
        .animate-pulse-glow {
          animation: pulse-glow 4s ease-in-out infinite;
        }
      `}</style>
      <div className="font-montreal bg-[#101012] text-white">
        {/* Navigation */}
        <nav className="fixed top-0 left-0 right-0 z-50 px-8 py-4 bg-[#101012]">
          <div className="max-w-content mx-auto flex items-center justify-between">
            <Link href="https://suno.com">
              <Image
                src="https://about.suno.com/img/life-at-suno/Suno_wordmark.svg"
                alt="SUNO"
                width={81}
                height={20}
              />
            </Link>
            <div className="flex items-center gap-2">
              <Link
                href="https://suno.com/login?redirect_to=/create"
                className="font-montreal px-6 h-12 flex items-center text-base font-medium text-white rounded-full hover:bg-white/5 transition-colors"
              >
                Sign in
              </Link>
              <Link
                href="https://suno.com/login?redirect_to=/create"
                className="font-montreal px-6 h-12 flex items-center text-base font-medium bg-white text-black rounded-full hover:bg-gray-100 transition-colors"
              >
                Sign up
              </Link>
            </div>
          </div>
        </nav>

        {/* Hero Section */}
        <section className="px-8 pt-32 pb-10 md:pb-20 max-w-hero mx-auto">
          <div className="flex flex-col gap-6 items-center text-center">
            <h1 className="font-editorial text-hero-sm md:text-hero font-light">
              Music doesn&apos;t stop. Neither do we.
            </h1>
            <p className="font-montreal text-base md:text-lg leading-6 md:leading-7 text-[#a3a3a3] max-w-[782px]">
              Suno is a music company built to amplify imagination. Where ideas
              flow into sound and songs become yours. Together, we&apos;re
              building a revolutionary creative platform powered by the
              world&apos;s best music model to bring the joy of musical
              expression to everyone, everywhere.
            </p>
            <Link
              href="https://suno.com/careers"
              className="font-montreal h-12 px-6 bg-white/5 backdrop-blur-lg border border-white/10 rounded-full text-base font-medium hover:bg-white/10 transition-colors flex items-center"
            >
              See open positions
            </Link>
          </div>
        </section>

        {/* Hero Image Grid */}
        <section className="px-8 pb-40 md:pb-8 max-w-content mx-auto">
          <div className="grid grid-cols-3 md:grid-cols-4 gap-2 max-w-[1052px] mx-auto">
            {/* Tall left image */}
            <div className="hidden md:block row-span-2 rounded-[20px] overflow-hidden">
              <Image
                src="https://about.suno.com/img/life-at-suno/3b17a6680c5f74fbbee26d6ab3beee96420b7995.jpg"
                alt="Studio"
                width={260}
                height={532}
                className="w-full h-full object-cover"
              />
            </div>

            {/* Middle top */}
            <div className="col-span-2 rounded-[20px] overflow-hidden h-[180px] md:h-[260px]">
              <Image
                src="https://about.suno.com/img/life-at-suno/61392723dedde16890c72403472dee91a2985991.jpg"
                alt="Mixer"
                width={532}
                height={260}
                className="w-full h-full object-cover"
              />
            </div>

            {/* Top right */}
            <div className="rounded-[20px] overflow-hidden h-[180px] md:h-[260px]">
              <Image
                src="https://about.suno.com/img/life-at-suno/ed1108791b2eb1ab69eb8835fc327360a6a309f6.jpg"
                alt="Studio Collab"
                width={260}
                height={260}
                className="w-full h-full object-cover"
              />
            </div>

            {/* Middle bottom */}
            <div className="rounded-[20px] overflow-hidden h-[180px] md:h-[260px]">
              <Image
                src="https://about.suno.com/img/life-at-suno/9986fe0c091e273721b1ba9d6c7b80d7473d08e5.png"
                alt="Hat"
                width={260}
                height={260}
                className="w-full h-full object-cover"
              />
            </div>

            {/* Bottom right */}
            <div className="col-span-2 rounded-[20px] overflow-hidden h-[180px] md:h-[260px]">
              <Image
                src="https://about.suno.com/img/life-at-suno/f854e5a189997f3bfbf1c76a2459e027a9ed2ddb.jpg"
                alt="Piano on stage"
                width={532}
                height={260}
                className="w-full h-full object-cover"
              />
            </div>
          </div>
        </section>

        {/* Our Story Section */}
        <section className="px-8 pt-24 pb-40 md:pb-24 max-w-content mx-auto">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-10 lg:gap-16 items-center">
            <div>
              <p className="font-montreal text-base leading-6 mb-3">
                Our story
              </p>
              <h2 className="font-montreal text-heading-lg md:text-heading-xl font-medium mb-8">
                Created with,
                <br /> and for, musicians
                <br /> at every level
              </h2>
              <p className="font-montreal text-base md:text-lg leading-6 md:leading-7 text-[#a3a3a3]">
                Since day one, we&apos;ve focused on delivering an extraordinary
                creative experience for anyone who wants to make music—whether
                it&apos;s their first time or their thousandth. Millions around
                the world use Suno to shape the soundtrack of their lives. And
                we&apos;re just getting started.
              </p>
            </div>

            <div className="relative flex justify-center items-center">
              <Image
                src="https://about.suno.com/img/life-at-suno/aura.png"
                alt="Background Aura"
                width={526}
                height={526}
                className="absolute w-full h-full object-contain rounded-[20px]"
              />
              <Image
                src="https://about.suno.com/img/life-at-suno/hooks.png"
                alt="Musicians Creating"
                quality={95}
                width={526}
                height={526}
                className="relative z-10 w-full h-auto rounded-[20px]"
              />
            </div>
          </div>
        </section>

        {/* Inside Suno Section */}
        <section className="px-8 pt-10 md:pt-24 pb-40 md:pb-60">
          <div className="max-w-[676px] mx-auto text-center mb-20">
            <p className="font-montreal text-base leading-6 mb-3">
              Inside Suno
            </p>
            <h2 className="font-montreal text-heading-lg md:text-heading-xl font-medium mb-6">
              Music isn&apos;t just what we make, it&apos;s who we are.
            </h2>
            <p className="font-montreal text-base md:text-lg leading-6 md:leading-7 text-[#a3a3a3]">
              Our team is made up of dedicated musicians, attuned audio
              engineers, passionate listeners and bold innovators united by
              purpose: to expand how music is created and experienced.
            </p>
          </div>

          {/* Horizontal scrolling carousel */}
          <div className="overflow-hidden relative">
            <div className="flex gap-10 animate-scroll-right">
              <div className="w-[280px] h-[260px] md:w-[533px] md:h-[400px] rounded-[16px] overflow-hidden flex-shrink-0">
                <Image
                  src="https://about.suno.com/img/life-at-suno/14b5c3a8f2d9305e513cd68f118869777ecf8c77.jpg"
                  alt="Team 1"
                  width={533}
                  height={400}
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="w-[280px] h-[260px] md:w-[533px] md:h-[400px] rounded-[20px] overflow-hidden flex-shrink-0">
                <Image
                  src="https://about.suno.com/img/life-at-suno/80e6173d1266040274f47c6b1aff6569404b67ed.png"
                  alt="Team 2"
                  width={533}
                  height={400}
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="w-[280px] h-[260px] md:w-[533px] md:h-[400px] rounded-[20px] overflow-hidden flex-shrink-0">
                <Image
                  src="https://about.suno.com/img/life-at-suno/99f1444bafbe35375fe9cb9c9b761111dbe1c951.png"
                  alt="Team 3"
                  width={533}
                  height={400}
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="w-[280px] h-[260px] md:w-[533px] md:h-[400px] rounded-[20px] overflow-hidden flex-shrink-0">
                <Image
                  src="https://about.suno.com/img/life-at-suno/28886d86702aa3528d8581250f2b2d251001a316.jpg"
                  alt="Team 4"
                  width={533}
                  height={400}
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="w-[280px] h-[260px] md:w-[533px] md:h-[400px] rounded-[20px] overflow-hidden flex-shrink-0">
                <Image
                  src="https://about.suno.com/img/life-at-suno/ae978f22c3ed1db702d65361876ea987aef4b728.png"
                  alt="Team 5"
                  width={533}
                  height={400}
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="w-[280px] h-[260px] md:w-[533px] md:h-[400px] rounded-[20px] overflow-hidden flex-shrink-0">
                <Image
                  src="https://about.suno.com/img/life-at-suno/ea0d4bf9ba5e6800fef23308be35d539c6e2e586.jpg"
                  alt="Team 6"
                  width={533}
                  height={400}
                  className="w-full h-full object-cover"
                />
              </div>
              {/* Duplicate images for seamless loop */}
              <div className="w-[280px] h-[260px] md:w-[533px] md:h-[400px] rounded-[16px] overflow-hidden flex-shrink-0">
                <Image
                  src="https://about.suno.com/img/life-at-suno/14b5c3a8f2d9305e513cd68f118869777ecf8c77.jpg"
                  alt="Team 1"
                  width={533}
                  height={400}
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="w-[280px] h-[260px] md:w-[533px] md:h-[400px] rounded-[20px] overflow-hidden flex-shrink-0">
                <Image
                  src="https://about.suno.com/img/life-at-suno/80e6173d1266040274f47c6b1aff6569404b67ed.png"
                  alt="Team 2"
                  width={533}
                  height={400}
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="w-[280px] h-[260px] md:w-[533px] md:h-[400px] rounded-[20px] overflow-hidden flex-shrink-0">
                <Image
                  src="https://about.suno.com/img/life-at-suno/99f1444bafbe35375fe9cb9c9b761111dbe1c951.png"
                  alt="Team 3"
                  width={533}
                  height={400}
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="w-[280px] h-[260px] md:w-[533px] md:h-[400px] rounded-[20px] overflow-hidden flex-shrink-0">
                <Image
                  src="https://about.suno.com/img/life-at-suno/28886d86702aa3528d8581250f2b2d251001a316.jpg"
                  alt="Team 4"
                  width={533}
                  height={400}
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="w-[280px] h-[260px] md:w-[533px] md:h-[400px] rounded-[20px] overflow-hidden flex-shrink-0">
                <Image
                  src="https://about.suno.com/img/life-at-suno/ae978f22c3ed1db702d65361876ea987aef4b728.png"
                  alt="Team 5"
                  width={533}
                  height={400}
                  className="w-full h-full object-cover"
                />
              </div>
              <div className="w-[280px] h-[260px] md:w-[533px] md:h-[400px] rounded-[20px] overflow-hidden flex-shrink-0">
                <Image
                  src="https://about.suno.com/img/life-at-suno/ea0d4bf9ba5e6800fef23308be35d539c6e2e586.jpg"
                  alt="Team 6"
                  width={533}
                  height={400}
                  className="w-full h-full object-cover"
                />
              </div>
            </div>
          </div>
        </section>

        {/* Offices Section - Light Background */}
        <section className="bg-[#f7f4ef] text-black px-8 pt-40 pb-0 md:pb-40">
          <div className="max-w-content mx-auto">
            <div className="max-w-[876px] mx-auto text-center mb-10 md:mb-20">
              <p className="font-montreal text-base leading-6 mb-3">
                Our offices
              </p>
              <h2 className="font-montreal text-heading-lg md:text-heading-xl font-medium mb-6">
                Where ideas
                <br /> take shape
              </h2>
              <p className="font-montreal text-base md:text-lg leading-6 md:leading-7 text-[#7d7c83] mb-8">
                Headquartered in Cambridge, MA, Suno spans three offices where
                teams come together to design, code, play, grow, and build the
                future of music.
              </p>
              <a
                href="https://suno.com/careers"
                target="_blank"
                rel="noopener noreferrer"
              >
                <button className="font-montreal h-12 px-6 bg-black/5 backdrop-blur-lg border border-black/10 rounded-full text-base font-medium hover:bg-black/10 transition-colors">
                  See open positions
                </button>
              </a>
            </div>

            <div className="grid grid-cols-1 md:grid-cols-3 gap-3">
              <div className="office-card p-3 rounded-[24px] hover:bg-[#e87722] transition-colors duration-700 group">
                <div className="office-image h-[200px] md:h-auto md:aspect-square rounded-[16px] overflow-hidden mb-3 relative">
                  <Image
                    src="https://about.suno.com/img/life-at-suno/Cambridge.png"
                    alt="Cambridge office"
                    fill
                    className="object-cover"
                    quality={95}
                  />
                </div>
                <h3 className="font-montreal text-2xl leading-6 tracking-[-0.02em] font-medium mb-1 py-1">
                  Cambridge, MA
                </h3>
                <p className="font-montreal text-lg leading-6 text-black/40 group-hover:text-black transition-colors duration-700">
                  Harvard Square
                </p>
              </div>

              <div className="office-card p-3 rounded-[24px] hover:bg-[#e87722] transition-colors duration-700 group">
                <div className="office-image h-[200px] md:h-auto md:aspect-square rounded-[16px] overflow-hidden mb-3 relative">
                  <Image
                    src="https://about.suno.com/img/life-at-suno/Chelsea.png"
                    alt="New York office"
                    fill
                    className="object-cover"
                    quality={95}
                  />
                </div>
                <h3 className="font-montreal text-2xl leading-6 tracking-[-0.02em] font-medium mb-1 py-1">
                  New York, NY
                </h3>
                <p className="font-montreal text-lg leading-6 text-black/40 group-hover:text-black transition-colors duration-700">
                  Chelsea
                </p>
              </div>

              <div className="office-card p-3 rounded-[24px] hover:bg-[#e87722] transition-colors duration-700 group">
                <div className="office-image h-[200px] md:h-auto md:aspect-square rounded-[16px] overflow-hidden mb-3 relative">
                  <Image
                    src="https://about.suno.com/img/life-at-suno/Venice.png"
                    alt="Los Angeles office"
                    fill
                    className="object-cover"
                    quality={95}
                  />
                </div>
                <h3 className="font-montreal text-2xl leading-6 tracking-[-0.02em] font-medium mb-1 py-1">
                  Los Angeles, CA
                </h3>
                <p className="font-montreal text-lg leading-6 text-black/40 group-hover:text-black transition-colors duration-700">
                  Venice
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* Values Section */}
        <section className="bg-[#f7f4ef] text-black px-8 pt-40 md:pt-40 pb-40 md:pb-20">
          <div className="max-w-content mx-auto">
            <p className="font-montreal text-base leading-6 mb-10">
              Our values
            </p>

            {/* Music */}
            <div className="mb-10 pb-10 border-b border-solid border-black/10 group cursor-pointer music-value relative">
              <div className="grid grid-cols-1 xl:grid-cols-2 gap-2 items-center mb-2">
                <div>
                  <h3 className="font-editorial text-display-sm md:text-display font-light leading-none group-hover:text-[#e87722] transition-colors duration-700">
                    Music
                  </h3>
                  <p className="font-montreal text-xl md:text-[32px] leading-7 md:leading-8 tracking-[-0.02em] mt-2 md:mt-4 group-hover:text-[#e87722] transition-colors duration-700">
                    is our company focus
                  </p>
                </div>
                <p className="font-montreal text-base md:text-lg leading-6 md:leading-7 text-[#7d7c83] max-w-[376px] xl:ml-auto">
                  We&apos;re a music company built around a single purpose:
                  transforming how people create and experience music. AI is our
                  tool, not our identity.
                </p>
              </div>
              <div className="music-value-image hidden md:block rounded-[20px] overflow-hidden">
                <Image
                  src="https://about.suno.com/img/life-at-suno/4cbede220156c70e0b5ef971b1932eb9790f1027.jpg"
                  alt="Music"
                  width={324}
                  height={324}
                  className="w-full h-full object-cover"
                />
              </div>
            </div>

            {/* Impatience */}
            <div className="mb-10 pb-10 border-b border-solid border-black/10 group cursor-pointer impatience-value relative">
              <div className="grid grid-cols-1 xl:grid-cols-2 gap-2 items-center mb-2">
                <div>
                  <h3 className="font-editorial text-display-sm md:text-display font-light leading-none group-hover:text-[#e87722] transition-colors duration-700">
                    Impatience
                  </h3>
                  <p className="font-montreal text-xl md:text-[32px] leading-7 md:leading-8 tracking-[-0.02em] mt-2 md:mt-4 group-hover:text-[#e87722] transition-colors duration-700">
                    is a virtue
                  </p>
                </div>
                <p className="font-montreal text-base md:text-lg leading-6 md:leading-7 text-[#7d7c83] max-w-[376px] xl:ml-auto">
                  We always aspire to improve our bar for craft. Extreme
                  ownership is how we achieve that.
                </p>
              </div>
              <div className="impatience-value-image hidden md:block rounded-[20px] overflow-hidden">
                <Image
                  src="https://about.suno.com/img/life-at-suno/a8e8364d3eca2476df080a803e1c14e8e3c34258.jpg"
                  alt="Impatience"
                  width={244}
                  height={220}
                  className="w-full h-full object-cover"
                />
              </div>
            </div>

            {/* Aesthetics */}
            <div className="mb-10 pb-10 border-b border-solid border-black/10 group cursor-pointer aesthetics-value relative">
              <div className="grid grid-cols-1 xl:grid-cols-2 gap-2 items-center mb-2">
                <div>
                  <h3 className="font-editorial text-display-sm md:text-display font-light leading-none group-hover:text-[#e87722] transition-colors duration-700">
                    Aesthetics
                  </h3>
                  <p className="font-montreal text-xl md:text-[32px] leading-7 md:leading-8 tracking-[-0.02em] mt-2 md:mt-4 group-hover:text-[#e87722] transition-colors duration-700">
                    matter
                  </p>
                </div>
                <p className="font-montreal text-base md:text-lg leading-6 md:leading-7 text-[#7d7c83] max-w-[376px] xl:ml-auto">
                  Great taste isn&apos;t subjective—it&apos;s a skill. We trust
                  our instincts, value beauty in every detail, and have the
                  courage to follow good judgment even when the data disagrees.
                </p>
              </div>
              <div className="aesthetics-value-image hidden md:block rounded-[20px] overflow-hidden">
                <Image
                  src="https://about.suno.com/img/life-at-suno/9c4a71b1c336c66e4b06424992c0b4317652640b.png"
                  alt="Aesthetics"
                  width={324}
                  height={324}
                  className="w-full h-full object-cover"
                />
              </div>
            </div>

            {/* Fun */}
            <div className="group cursor-pointer fun-value relative">
              <div className="grid grid-cols-1 xl:grid-cols-2 gap-2 items-center mb-2">
                <div>
                  <h3 className="font-editorial text-display-sm md:text-display font-light leading-none group-hover:text-[#e87722] transition-colors duration-700">
                    Fun
                  </h3>
                  <p className="font-montreal text-xl md:text-[32px] leading-7 md:leading-8 tracking-[-0.02em] mt-2 md:mt-4 group-hover:text-[#e87722] transition-colors duration-700">
                    is underrated
                  </p>
                </div>
                <p className="font-montreal text-base md:text-lg leading-6 md:leading-7 text-[#7d7c83] max-w-[376px] xl:ml-auto">
                  We take joy seriously. Creativity thrives when we&apos;re
                  playful, open, and having fun—because making music should feel
                  as good as it sounds.
                </p>
              </div>
              <div className="fun-value-image hidden md:block rounded-[20px] overflow-hidden">
                <Image
                  src="https://about.suno.com/img/life-at-suno/e723563e758e3d5a6be31a665b2f2ea3acb49e6f.jpg"
                  alt="Fun"
                  width={210}
                  height={220}
                  className="w-full h-full object-cover"
                />
              </div>
            </div>
          </div>
        </section>

        {/* People Section */}
        <section className="bg-[#f7f4ef] text-black px-8 pt-20 pb-40 relative overflow-hidden">
          <div className="max-w-content mx-auto relative z-10 pointer-events-none">
            <div className="grid grid-cols-1 lg:grid-cols-12 gap-16">
              <div className="lg:col-span-5 pointer-events-auto">
                <p className="font-montreal text-base leading-6 mb-6">
                  Our people
                </p>
                <h2 className="font-montreal text-heading-lg md:text-heading-xl font-medium mb-8">
                  Creativity in every voice.
                </h2>
                <p className="font-montreal text-base md:text-lg leading-6 md:leading-7 text-[#7d7c83] mb-8">
                  We&apos;re a diverse group of creatives, technologists, and
                  dreamers who bring our full selves to the table. Our
                  differences and passion fuel the energy that drives Suno.
                </p>
                <a
                  href="https://suno.com/careers"
                  target="_blank"
                  rel="noopener noreferrer"
                >
                  <button className="font-montreal h-12 px-6 bg-black/5 backdrop-blur-lg border border-black/10 rounded-full text-base font-medium hover:bg-black/10 transition-colors">
                    See open positions
                  </button>
                </a>
              </div>
              <div className="lg:col-span-7"></div>
            </div>
          </div>

          <div className="relative lg:absolute lg:top-20 left-0 right-0 w-full pointer-events-none mt-3 lg:mt-0">
            <div className="relative overflow-visible ml-[calc((100vw-1440px)/2+500px+64px)] mr-20 pointer-events-auto max-lg:ml-0 max-lg:mr-0">
              <div
                ref={carouselRef}
                className="overflow-x-auto overflow-y-hidden people-carousel-container w-full lg:[mask-image:linear-gradient(to_right,transparent_0%,black_12%,black_88%,transparent_100%)] lg:[-webkit-mask-image:linear-gradient(to_right,transparent_0%,black_12%,black_88%,transparent_100%)]"
                onMouseEnter={() => setIsHovered(true)}
                onMouseLeave={() => setIsHovered(false)}
              >
                <div
                  className="flex gap-4 pl-5 pr-5 lg:pl-[450px] lg:pr-[750px]"
                  ref={carouselInnerRef}
                >
                  <div className="people-card bg-[#e0deda] rounded-[16px] p-6 w-[360px] h-[472px] flex flex-col justify-between flex-shrink-0">
                    <p className="people-card-description font-montreal text-base md:text-lg leading-6 md:leading-7">
                      The people at Suno are the most humble, kind, and
                      simultaneously smartest I&apos;ve ever worked with—to a
                      one. Those two qualities can often be at odds, but not at
                      Suno. There are genuinely no Sunday scaries for me here
                      (and they&apos;re not paying me to say this).
                    </p>
                    <div className="people-card-footer flex items-center gap-4">
                      <div className="w-10 h-10 rounded-full overflow-hidden flex-shrink-0">
                        <Image
                          src="https://about.suno.com/img/life-at-suno/760df6f5f79686aba1f9a0785fa09a0c324ee15b.png"
                          alt="Claire Sapan"
                          width={970}
                          height={1066}
                          className="w-full h-full object-cover"
                        />
                      </div>
                      <div>
                        <p className="font-montreal text-2xl leading-6 tracking-[-0.02em] font-medium">
                          Claire Sapan
                        </p>
                        <p className="font-montreal text-base leading-6 opacity-50">
                          Growth Lead
                        </p>
                      </div>
                    </div>
                  </div>

                  <div className="people-card bg-[#e0deda] rounded-[16px] p-6 w-[360px] h-[472px] flex flex-col justify-between flex-shrink-0">
                    <p className="people-card-description font-montreal text-base md:text-lg leading-6 md:leading-7">
                      Working at Suno feels like starting the day with dessert.
                      It&apos;s a privilege to learn from such talented people
                      who are as passionate about music as they are about
                      building product. Building the future of music is a tough
                      ask, but it&apos;s a lot easier when you&apos;re
                      surrounded by rockstars.
                    </p>
                    <div className="people-card-footer flex items-center gap-4">
                      <div className="w-10 h-10 rounded-full overflow-hidden flex-shrink-0">
                        <Image
                          src="https://about.suno.com/img/life-at-suno/6e14314fb4b02ec137b9cbbd73558e3f18598691.png"
                          alt="Eke Wokocha"
                          width={954}
                          height={944}
                          className="w-full h-full object-cover"
                        />
                      </div>
                      <div>
                        <p className="font-montreal text-2xl leading-6 tracking-[-0.02em] font-medium">
                          Eke Wokocha
                        </p>
                        <p className="font-montreal text-base leading-6 opacity-50">
                          Software Engineer
                        </p>
                      </div>
                    </div>
                  </div>

                  <div className="people-card bg-[#e0deda] rounded-[16px] p-6 w-[360px] h-[472px] flex flex-col justify-between flex-shrink-0">
                    <p className="people-card-description font-montreal text-base md:text-lg leading-6 md:leading-7">
                      As an MLE at Suno, I blend tech and music passions daily.
                      Teaching models melody and emotion is challenging, but
                      seeing non-musicians create their first song is magic.
                      We&apos;re making music creation accessible to millions
                      while actually having fun doing it!
                    </p>
                    <div className="people-card-footer flex items-center gap-4">
                      <div className="w-10 h-10 rounded-full overflow-hidden flex-shrink-0">
                        <Image
                          src="https://about.suno.com/img/life-at-suno/fdc7c98e58e18d97894558e383d09d1983df6896.png"
                          alt="Tony Tong"
                          width={40}
                          height={40}
                          className="w-full h-full object-cover"
                        />
                      </div>
                      <div>
                        <p className="font-montreal text-2xl leading-6 tracking-[-0.02em] font-medium">
                          Tony Tong
                        </p>
                        <p className="font-montreal text-base leading-6 opacity-50">
                          Machine Learning Engineer
                        </p>
                      </div>
                    </div>
                  </div>

                  <div className="people-card bg-[#e0deda] rounded-[16px] p-6 w-[360px] h-[472px] flex flex-col justify-between flex-shrink-0">
                    <p className="people-card-description font-montreal text-base md:text-lg leading-6 md:leading-7">
                      I&apos;ve been looking for something like Suno my entire
                      career. Building a product that millions of people use to
                      create, listen and share is a fun and addicting problem.
                      Doing it with such a talented, one-of-a-kind team makes
                      all the difference.
                    </p>
                    <div className="people-card-footer flex items-center gap-4">
                      <div className="w-10 h-10 rounded-full overflow-hidden flex-shrink-0">
                        <Image
                          src="https://about.suno.com/img/life-at-suno/Bassel.jpg"
                          alt="Bassel Alesh"
                          width={40}
                          height={40}
                          className="w-full h-full object-cover"
                        />
                      </div>
                      <div>
                        <p className="font-montreal text-2xl leading-6 tracking-[-0.02em] font-medium">
                          Bassel Alesh
                        </p>
                        <p className="font-montreal text-base leading-6 opacity-50">
                          Software Engineer, iOS
                        </p>
                      </div>
                    </div>
                  </div>

                  <div className="people-card bg-[#e0deda] rounded-[16px] p-6 w-[360px] h-[472px] flex flex-col justify-between flex-shrink-0">
                    <p className="people-card-description font-montreal text-base md:text-lg leading-6 md:leading-7">
                      The people are the best. They&apos;re smart and kind and
                      fun and low-ego. This is a group of people I want to spent
                      the good times with but especially the challenging times
                      with because I know the good-humored, collaborative,
                      fun-is-underrated Suno spirit is strong in everyone.
                    </p>
                    <div className="people-card-footer flex items-center gap-4">
                      <div className="w-10 h-10 rounded-full overflow-hidden flex-shrink-0">
                        <Image
                          src="https://about.suno.com/img/life-at-suno/Margaret.jpg"
                          alt="Margaret Tian"
                          width={40}
                          height={40}
                          className="w-full h-full object-cover"
                        />
                      </div>
                      <div>
                        <p className="font-montreal text-2xl leading-6 tracking-[-0.02em] font-medium">
                          Margaret Tian
                        </p>
                        <p className="font-montreal text-base leading-6 opacity-50">
                          Head of Data
                        </p>
                      </div>
                    </div>
                  </div>

                  <div className="people-card bg-[#e0deda] rounded-[16px] p-6 w-[360px] h-[472px] flex flex-col justify-between flex-shrink-0">
                    <p className="people-card-description font-montreal text-base md:text-lg leading-6 md:leading-7">
                      There are too many positive things about Suno culture to
                      capture in a pull quote. There&apos;s a pervasive belief
                      that we&apos;re helping build the future of music and
                      unlocking a new type of creativity for millions of people,
                      and we don&apos;t take that lightly. Everyone balances
                      talent with humility, passion with curiosity, and the
                      desire to just play with the amazing product all day with
                      actually building the amazing product all day.
                    </p>
                    <div className="people-card-footer flex items-center gap-4">
                      <div className="w-10 h-10 rounded-full overflow-hidden flex-shrink-0">
                        <Image
                          src="https://about.suno.com/img/life-at-suno/Ian.jpg"
                          alt="Ian Oliver"
                          width={40}
                          height={40}
                          className="w-full h-full object-cover"
                        />
                      </div>
                      <div>
                        <p className="font-montreal text-2xl leading-6 tracking-[-0.02em] font-medium">
                          Ian Oliver
                        </p>
                        <p className="font-montreal text-base leading-6 opacity-50">
                          Design Leader
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* Perks Section */}
        <section className="bg-[#101012] text-white px-8 pt-60 pb-24">
          <div className="max-w-content mx-auto">
            <div className="max-w-[776px] mx-auto text-center mb-20">
              <p className="font-montreal text-base leading-6 mb-3">
                What we offer
              </p>
              <h2 className="font-montreal text-heading-lg md:text-heading-xl font-medium mb-6">
                Perks and benefits
              </h2>
              <p className="font-montreal text-base md:text-lg leading-6 md:leading-7 text-[#a3a3a3] mb-8">
                We welcome and celebrate exceptional talent from diverse
                backgrounds. Our benefits support professional growth and
                personal well-being, helping every team member thrive.
              </p>
              <a
                href="https://suno.com/careers"
                target="_blank"
                rel="noopener noreferrer"
              >
                <button className="font-montreal h-12 px-6 bg-white/5 backdrop-blur-lg border border-white/10 rounded-full text-base font-medium hover:bg-white/10 transition-colors">
                  See open positions
                </button>
              </a>
            </div>

            <div className="flex flex-wrap gap-6 justify-center">
              <div className="bg-[#252529] rounded-[24px] p-6 h-auto md:h-[220px] w-full md:w-[calc(50%-12px)] lg:w-[calc(25%-18px)] flex flex-col items-center justify-center text-center">
                <div className="w-10 h-10 mb-3">
                  <Image
                    src="https://about.suno.com/img/life-at-suno/elderly.svg"
                    alt="Retirement"
                    width={40}
                    height={40}
                    className="w-full h-full"
                  />
                </div>
                <h3 className="font-montreal text-xl leading-6 tracking-[-0.02em] font-medium mb-2">
                  Retirement Match
                </h3>
                <p className="font-montreal text-sm leading-5 text-[#a3a3a3]">
                  Suno offers a Traditional 401(k) plan and Roth 401(k) plan
                  with a 3% Safe Harbor company match.
                </p>
              </div>

              <div className="bg-[#252529] rounded-[24px] p-6 h-auto md:h-[220px] w-full md:w-[calc(50%-12px)] lg:w-[calc(25%-18px)] flex flex-col items-center justify-center text-center">
                <div className="w-10 h-10 mb-3">
                  <Image
                    src="https://about.suno.com/img/life-at-suno/cardiology.svg"
                    alt="Medical"
                    width={40}
                    height={40}
                    className="w-full h-full"
                  />
                </div>
                <h3 className="font-montreal text-xl leading-6 tracking-[-0.02em] font-medium mb-2">
                  Medical, Dental & Vision
                </h3>
                <p className="font-montreal text-sm leading-5 text-[#a3a3a3]">
                  We offer competitive medical, dental, vision insurance for
                  employees and dependents.
                </p>
              </div>

              <div className="bg-[#252529] rounded-[24px] p-6 h-auto md:h-[220px] w-full md:w-[calc(50%-12px)] lg:w-[calc(25%-18px)] flex flex-col items-center justify-center text-center">
                <div className="w-10 h-10 mb-3">
                  <Image
                    src="https://about.suno.com/img/life-at-suno/briefcase_meal.svg"
                    alt="Lunch"
                    width={40}
                    height={40}
                    className="w-full h-full"
                  />
                </div>
                <h3 className="font-montreal text-xl leading-6 tracking-[-0.02em] font-medium mb-2">
                  Lunch Program
                </h3>
                <p className="font-montreal text-sm leading-5 text-[#a3a3a3]">
                  Suno offers free lunch 5 days a week in each of our office
                  locations.
                </p>
              </div>

              <div className="bg-[#252529] rounded-[24px] p-6 h-auto md:h-[220px] w-full md:w-[calc(50%-12px)] lg:w-[calc(25%-18px)] flex flex-col items-center justify-center text-center">
                <div className="w-10 h-10 mb-3">
                  <Image
                    src="https://about.suno.com/img/life-at-suno/bus_railway.svg"
                    alt="Commuter"
                    width={40}
                    height={40}
                    className="w-full h-full"
                  />
                </div>
                <h3 className="font-montreal text-xl leading-6 tracking-[-0.02em] font-medium mb-2">
                  Commuter Benefit
                </h3>
                <p className="font-montreal text-sm leading-5 text-[#a3a3a3]">
                  Generous monthly stipend for commuting expenses.
                </p>
              </div>

              <div className="bg-[#252529] rounded-[24px] p-6 h-auto md:h-[220px] w-full md:w-[calc(50%-12px)] lg:w-[calc(25%-18px)] flex flex-col items-center justify-center text-center">
                <div className="w-10 h-10 mb-3">
                  <Image
                    src="https://about.suno.com/img/life-at-suno/plane_contrails.svg"
                    alt="Time Off"
                    width={40}
                    height={40}
                    className="w-full h-full"
                  />
                </div>
                <h3 className="font-montreal text-xl leading-6 tracking-[-0.02em] font-medium mb-2">
                  Time Off
                </h3>
                <p className="font-montreal text-sm leading-5 text-[#a3a3a3]">
                  Suno employees are provided with unlimited paid time off as
                  well as unlimited sick days + 11 company holidays.
                </p>
              </div>

              <div className="bg-[#252529] rounded-[24px] p-6 h-auto md:h-[220px] w-full md:w-[calc(50%-12px)] lg:w-[calc(25%-18px)] flex flex-col items-center justify-center text-center">
                <div className="w-10 h-10 mb-3">
                  <Image
                    src="https://about.suno.com/img/life-at-suno/auto_stories.svg"
                    alt="Education"
                    width={40}
                    height={40}
                    className="w-full h-full"
                  />
                </div>
                <h3 className="font-montreal text-xl leading-6 tracking-[-0.02em] font-medium mb-2">
                  Creative Education Stipend
                </h3>
                <p className="font-montreal text-sm leading-5 text-[#a3a3a3]">
                  Annual reimbursements for creative education and development.
                </p>
              </div>

              <div className="bg-[#252529] rounded-[24px] p-6 h-auto md:h-[220px] w-full md:w-[calc(50%-12px)] lg:w-[calc(25%-18px)] flex flex-col items-center justify-center text-center">
                <div className="w-10 h-10 mb-3">
                  <Image
                    src="https://about.suno.com/img/life-at-suno/breastfeeding.svg"
                    alt="Parental Leave"
                    width={40}
                    height={40}
                    className="w-full h-full"
                  />
                </div>
                <h3 className="font-montreal text-xl leading-6 tracking-[-0.02em] font-medium mb-2">
                  Parental Leave
                </h3>
                <p className="font-montreal text-sm leading-5 text-[#a3a3a3]">
                  16 weeks of fully paid parental leave to both birthing and
                  non-birthing parents.
                </p>
              </div>
            </div>
          </div>
        </section>

        {/* Built to Amplify Imagination - Founders Section */}
        {/* <section className="bg-gradient-to-b from-[#101012] to-[#3d1a1a] text-white px-8 pt-48 pb-12 relative">
          <div className="max-w-content mx-auto relative z-10">
            <div className="absolute -top-12 -left-32 w-[600px] h-[350px] md:-top-32 md:-left-12 md:w-[1034px] md:h-[600px] pointer-events-none -z-10">
              <Image
                src="https://about.suno.com/img/life-at-suno/Component 22.svg"
                alt=""
                fill
                className="object-contain"
                priority
              />
            </div>
            <div className="absolute -top-12 -left-32 w-[600px] h-[350px] md:-top-32 md:-left-12 md:w-[1034px] md:h-[600px] pointer-events-none animate-pulse-glow -z-10">
              <Image
                src="https://about.suno.com/img/life-at-suno/Component 21.svg"
                alt=""
                fill
                className="object-contain"
                priority
              />
            </div>
            <div className="mb-6">
              <h2 className="font-editorial text-hero-sm md:text-hero font-light mb-4">
                Built to amplify imagination
              </h2>
              <p className="font-montreal text-base md:text-lg leading-6 md:leading-7 text-[#a3a3a3]">
                One song at a time.
              </p>
            </div>

            <div className="flex gap-6 mb-6 flex-wrap">
              <div className="flex gap-4 items-start">
                <div className="w-20 h-20 rounded-[16px] overflow-hidden flex-shrink-0">
                  <Image
                    src="https://about.suno.com/img/life-at-suno/284b3eca79304702f76ea5f4cd511c2b11ea3f62.png"
                    alt="Mikey Shulman"
                    width={1024}
                    height={521}
                    quality={100}
                    className="w-full h-full object-cover"
                    style={{ imageRendering: "crisp-edges" }}
                  />
                </div>
                <div>
                  <p className="font-montreal text-xl leading-6 tracking-[-0.02em] font-medium">
                    Mikey Shulman
                  </p>
                  <p className="font-montreal text-base leading-6 text-[#a3a3a3]">
                    Co-Founder and CEO
                  </p>
                  <div className="flex gap-3">
                    <Link
                      href="https://www.linkedin.com/in/mikeyshulman/"
                      className="text-white hover:text-white/70 transition-colors"
                    >
                      <svg
                        width="20"
                        height="20"
                        viewBox="0 0 24 24"
                        fill="currentColor"
                      >
                        <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
                      </svg>
                    </Link>
                  </div>
                </div>
              </div>

              <div className="flex gap-4 items-start">
                <div className="w-20 h-20 rounded-[16px] overflow-hidden flex-shrink-0">
                  <Image
                    src="https://about.suno.com/img/life-at-suno/martin.png"
                    alt="Martin Camacho"
                    width={862}
                    height={862}
                    quality={100}
                    className="w-full h-full object-cover"
                    style={{ imageRendering: "crisp-edges" }}
                  />
                </div>
                <div>
                  <p className="font-montreal text-xl leading-6 tracking-[-0.02em] font-medium">
                    Martin Camacho
                  </p>
                  <p className="font-montreal text-base leading-6 text-[#a3a3a3]">
                    Co-Founder
                  </p>
                  <div className="flex gap-3">
                    <Link
                      href="https://www.linkedin.com/in/mcamac/"
                      className="text-white hover:text-white/70 transition-colors"
                    >
                      <svg
                        width="20"
                        height="20"
                        viewBox="0 0 24 24"
                        fill="currentColor"
                      >
                        <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
                      </svg>
                    </Link>
                  </div>
                </div>
              </div>

              <div className="flex gap-4 items-start">
                <div className="w-20 h-20 rounded-[16px] overflow-hidden flex-shrink-0">
                  <Image
                    src="https://about.suno.com/img/life-at-suno/a142cc26c4485b972274ed725092f82e0ec51b9b.png"
                    alt="Georg Kucsko"
                    width={400}
                    height={400}
                    quality={100}
                    className="w-full h-full object-cover"
                    style={{ imageRendering: "crisp-edges" }}
                  />
                </div>
                <div>
                  <p className="font-montreal text-xl leading-6 tracking-[-0.02em] font-medium">
                    Georg Kucsko
                  </p>
                  <p className="font-montreal text-base leading-6 text-[#a3a3a3]">
                    Co-Founder
                  </p>
                  <div className="flex gap-3">
                    <Link
                      href="https://www.linkedin.com/in/georgkucsko/"
                      className="text-white hover:text-white/70 transition-colors"
                    >
                      <svg
                        width="20"
                        height="20"
                        viewBox="0 0 24 24"
                        fill="currentColor"
                      >
                        <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z" />
                      </svg>
                    </Link>
                  </div>
                </div>
              </div>
            </div>

            <a
              href="https://suno.com/careers"
              target="_blank"
              rel="noopener noreferrer"
            >
              <button className="font-montreal h-12 px-6 bg-white/5 backdrop-blur-lg border border-white/10 rounded-full text-base font-medium hover:bg-white/10 transition-colors">
                See open positions
              </button>
            </a>
          </div>
        </section> */}

        {/* Latest Blog Posts Section */}
        {latestPosts.length > 0 && (
          <section className="bg-[#101012] text-white px-8 pt-24 pb-4">
            <div className="max-w-content mx-auto">
              <div className="pb-8">
                <div className="border-t border-solid border-white/10 mb-20"></div>
                <h2
                  className="font-montreal text-[32px] font-normal leading-[32px] tracking-[-0.64px] mb-5"
                  style={{
                    color: "#F7F4EF",
                  }}
                >
                  Latest news
                </h2>

                <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                  {latestPosts.slice(0, 3).map((post) => (
                    <Link
                      key={post.id}
                      href={`/blog/${post.slug}`}
                      className="p-3 block group"
                    >
                      <div className="aspect-[16/9] rounded-[16px] bg-gray-700 mb-6 overflow-hidden">
                        {post.thumbnailImage?.url ? (
                          <Image
                            src={post.thumbnailImage.url}
                            alt={post.title || ""}
                            width={post.thumbnailImage.width || 600}
                            height={post.thumbnailImage.height || 400}
                            className="w-full h-full object-cover"
                          />
                        ) : (
                          <div className="w-full h-full bg-gradient-to-br from-gray-700 to-gray-800 flex items-center justify-center">
                            <span className="font-montreal text-white/40 text-sm">
                              Suno
                            </span>
                          </div>
                        )}
                      </div>
                      <h3 className="font-montreal text-2xl leading-7 font-medium mb-2 group-hover:text-white/80 transition-colors">
                        {post.title}
                      </h3>
                      <p className="font-montreal text-base leading-[22px] text-[#a3a3a3]">
                        {post.summary}
                      </p>
                    </Link>
                  ))}
                </div>
              </div>
            </div>
          </section>
        )}

        {/* Footer */}
        <footer className="bg-[#101012] text-white px-8 py-8">
          <div className="max-w-content mx-auto grid grid-cols-1 md:grid-cols-3 gap-4 md:gap-0 items-center">
            {/* Social Media Icons - Mobile Only (Top) */}
            <div className="flex items-center justify-center md:hidden order-1">
              <div className="flex items-center gap-4">
                {/* X/Twitter */}
                <Link
                  href="https://x.com/suno"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-white/50 hover:text-white transition-colors"
                >
                  <svg
                    className="w-3.5 h-3.5"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                  >
                    <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
                  </svg>
                </Link>

                {/* Discord */}
                <Link
                  href="https://discord.com/invite/suno"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-white/50 hover:text-white transition-colors"
                >
                  <svg
                    className="w-3.5 h-3.5"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                  >
                    <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
                  </svg>
                </Link>

                {/* TikTok */}
                <Link
                  href="https://www.tiktok.com/@sunomusic"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-white/50 hover:text-white transition-colors"
                >
                  <svg
                    className="w-3.5 h-3.5"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                  >
                    <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z" />
                  </svg>
                </Link>

                {/* Instagram */}
                <Link
                  href="https://www.instagram.com/sunomusic"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-white/50 hover:text-white transition-colors"
                >
                  <svg
                    className="w-3.5 h-3.5"
                    viewBox="0 0 24 24"
                    fill="currentColor"
                  >
                    <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
                  </svg>
                </Link>
              </div>
            </div>

            {/* Copyright and Navigation Links - Mobile (Bottom) */}
            <div className="flex flex-row items-center justify-center w-full gap-4 md:hidden order-2">
              <p className="font-montreal text-sm text-white/50">
                © 2025 Suno, Inc.
              </p>
              <span className="text-white/50 text-sm">|</span>
              <div className="flex items-center gap-4">
                <Link
                  href="https://suno.com"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="font-montreal text-sm text-white/50 hover:text-white transition-colors"
                >
                  Create
                </Link>
                <Link
                  href="https://suno.com/explore"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="font-montreal text-sm text-white/50 hover:text-white transition-colors"
                >
                  Explore
                </Link>
                <Link
                  href="https://suno.com/subscribe"
                  target="_blank"
                  rel="noopener noreferrer"
                  className="font-montreal text-sm text-white/50 hover:text-white transition-colors"
                >
                  Subscribe
                </Link>
              </div>
            </div>

            {/* Copyright - Desktop (Left) */}
            <div className="hidden md:flex items-center justify-start order-1">
              <p className="font-montreal text-sm text-white/50">
                © 2025 Suno, Inc.
              </p>
            </div>

            {/* Middle - Social Media Icons (Desktop only) */}
            <div className="hidden md:flex items-center justify-center gap-6 order-2">
              {/* X/Twitter */}
              <Link
                href="https://x.com/suno"
                target="_blank"
                rel="noopener noreferrer"
                className="text-white/50 hover:text-white transition-colors"
              >
                <svg
                  className="w-3.5 h-3.5"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                >
                  <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
                </svg>
              </Link>

              {/* Discord */}
              <Link
                href="https://discord.com/invite/suno"
                target="_blank"
                rel="noopener noreferrer"
                className="text-white/50 hover:text-white transition-colors"
              >
                <svg
                  className="w-3.5 h-3.5"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                >
                  <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z" />
                </svg>
              </Link>

              {/* TikTok */}
              <Link
                href="https://www.tiktok.com/@sunomusic"
                target="_blank"
                rel="noopener noreferrer"
                className="text-white/50 hover:text-white transition-colors"
              >
                <svg
                  className="w-3.5 h-3.5"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                >
                  <path d="M19.59 6.69a4.83 4.83 0 0 1-3.77-4.25V2h-3.45v13.67a2.89 2.89 0 0 1-5.2 1.74 2.89 2.89 0 0 1 2.31-4.64 2.93 2.93 0 0 1 .88.13V9.4a6.84 6.84 0 0 0-1-.05A6.33 6.33 0 0 0 5 20.1a6.34 6.34 0 0 0 10.86-4.43v-7a8.16 8.16 0 0 0 4.77 1.52v-3.4a4.85 4.85 0 0 1-1-.1z" />
                </svg>
              </Link>

              {/* Instagram */}
              <Link
                href="https://www.instagram.com/sunomusic"
                target="_blank"
                rel="noopener noreferrer"
                className="text-white/50 hover:text-white transition-colors"
              >
                <svg
                  className="w-3.5 h-3.5"
                  viewBox="0 0 24 24"
                  fill="currentColor"
                >
                  <path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z" />
                </svg>
              </Link>
            </div>

            {/* Right - Navigation Links (Desktop only) */}
            <div className="hidden md:flex items-center justify-end gap-8 order-3">
              <Link
                href="https://suno.com"
                target="_blank"
                rel="noopener noreferrer"
                className="font-montreal text-sm text-white/50 hover:text-white transition-colors"
              >
                Create
              </Link>
              <Link
                href="https://suno.com/explore"
                target="_blank"
                rel="noopener noreferrer"
                className="font-montreal text-sm text-white/50 hover:text-white transition-colors"
              >
                Explore
              </Link>
              <Link
                href="https://suno.com/subscribe"
                target="_blank"
                rel="noopener noreferrer"
                className="font-montreal text-sm text-white/50 hover:text-white transition-colors"
              >
                Subscribe
              </Link>
            </div>
          </div>
        </footer>
      </div>
    </>
  );
}

export async function getStaticProps() {
  let latestPosts: Post[] = [];

  try {
    const allPosts = await getAllPosts();
    latestPosts = allPosts || [];
  } catch (error) {
    console.error("Error fetching blog posts:", error);
  }

  return {
    props: {
      latestPosts: latestPosts.slice(0, MAX_LATEST_POSTS),
    },
    revalidate: 300, // Revalidate every 5 minutes
  };
}