"use client";

import { ColorPanels } from "@paper-design/shaders-react";
import { Code2, Sparkles, Users } from "lucide-react";
import { type HTMLMotionProps, motion, useInView, type Variants } from "motion/react";
import type { SVGProps } from "react";
import * as React from "react";
import { cn } from "@/lib/utils";

// ---------------------------------------------------------------------------
// Animation variants (matching hero-vite vocabulary)
// ---------------------------------------------------------------------------

const containerVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.08,
      delayChildren: 0.1,
    },
  },
};

const wordVariants: Variants = {
  hidden: {
    opacity: 0,
    y: 20,
    filter: "blur(8px)",
  },
  visible: {
    opacity: 1,
    y: 0,
    filter: "blur(0px)",
    transition: {
      duration: 0.5,
      ease: [0.25, 0.4, 0.25, 1],
    },
  },
};

const valuesGridVariants: Variants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: {
      staggerChildren: 0.12,
      delayChildren: 0.15,
    },
  },
};

const valueCardVariants: Variants = {
  hidden: { opacity: 0, y: 24 },
  visible: {
    opacity: 1,
    y: 0,
    transition: {
      type: "spring",
      stiffness: 260,
      damping: 24,
    },
  },
};

// ---------------------------------------------------------------------------
// Animated text helpers
// ---------------------------------------------------------------------------

function AnimatedWords({ children, className }: { children: string; className?: string }) {
  const ref = React.useRef<HTMLSpanElement>(null);
  const isInView = useInView(ref, { once: true, margin: "-80px" });
  const words = children.split(" ");

  return (
    <motion.span
      animate={isInView ? "visible" : "hidden"}
      className={cn("inline-flex flex-wrap", className)}
      initial="hidden"
      ref={ref}
      variants={containerVariants}
    >
      {words.map((word, index) => (
        <motion.span className="mr-[0.25em] inline-block" key={index} variants={wordVariants}>
          {word}
        </motion.span>
      ))}
    </motion.span>
  );
}

// ---------------------------------------------------------------------------
// Types
// ---------------------------------------------------------------------------

const VITE_COLORS = ["#ed40b3", "#6ef7cc", "#adfa1e", "#b054de"] as const;

export interface AboutViteValue {
  name: string;
  description: string;
  icon?: React.ComponentType<{ className?: string }>;
  accentColor?: string;
}

export interface AboutViteRootProps extends Omit<React.ComponentPropsWithoutRef<"section">, "title"> {
  srTitle?: string;
  title?: React.ReactNode;
  subtitle?: React.ReactNode;
  description?: React.ReactNode;
  storyHeading?: React.ReactNode;
  storyParagraphs?: React.ReactNode[];
  values?: AboutViteValue[];
  shaderProps?: Partial<React.ComponentProps<typeof ColorPanels>>;
}

// ---------------------------------------------------------------------------
// Context
// ---------------------------------------------------------------------------

interface AboutViteContextValue {
  srTitle: string;
  title: React.ReactNode;
  subtitle: React.ReactNode;
  description: React.ReactNode;
  storyHeading: React.ReactNode;
  storyParagraphs: React.ReactNode[];
  values: AboutViteValue[];
  shaderProps: Partial<React.ComponentProps<typeof ColorPanels>>;
}

const AboutViteContext = React.createContext<AboutViteContextValue | undefined>(undefined);

function useAboutViteContext() {
  const ctx = React.useContext(AboutViteContext);
  if (!ctx) {
    throw new Error("AboutVite components must be used within AboutViteRoot");
  }
  return ctx;
}

export function useAboutVite() {
  return useAboutViteContext();
}

// ---------------------------------------------------------------------------
// Default data
// ---------------------------------------------------------------------------

const defaultShaderProps: Partial<React.ComponentProps<typeof ColorPanels>> = {
  colors: ["#ed40b3", "#6ef7cc", "#adfa1e", "#b054de"],
  colorBack: "#ffffff00",
  density: 4.2,
  angle1: 0.52,
  angle2: 0.38,
  length: 1.0,
  edges: true,
  blur: 0.3,
  fadeIn: 0.9,
  fadeOut: 0.35,
  gradient: 0.5,
  speed: 3,
  scale: 1.0,
  rotation: 120,
};

const defaultValues: AboutViteValue[] = [
  {
    name: "Developer Experience",
    description:
      "Every API is designed to be intuitive, composable, and delightful. We sweat the small details so you ship faster.",
    icon: Code2,
    accentColor: VITE_COLORS[0],
  },
  {
    name: "Visual Craft",
    description:
      "Production-grade aesthetics out of the box. Layered shadows, spring animations, and pixel-perfect spacing come standard.",
    icon: Sparkles,
    accentColor: VITE_COLORS[1],
  },
  {
    name: "Community First",
    description:
      "Open source at its core. Built in public, shaped by feedback, and designed to grow with the ecosystem.",
    icon: Users,
    accentColor: VITE_COLORS[2],
  },
];

const defaultStoryParagraphs: React.ReactNode[] = [
  <>
    We started with a simple question:{" "}
    <span className="font-medium text-foreground">why does building beautiful interfaces still feel so painful?</span>{" "}
    The tooling existed, the design systems were maturing, but the gap between vision and implementation remained wide.
  </>,
  <>
    So we built a component library that closes that gap. Every piece is engineered for{" "}
    <span className="font-medium text-foreground">real production use</span> — not just demos. Accessible, themable,
    and crafted with the same attention to detail you'd expect from a native platform.
  </>,
];

// ---------------------------------------------------------------------------
// Memoized shader
// ---------------------------------------------------------------------------

const MemoizedColorPanels = React.memo(ColorPanels);

// ---------------------------------------------------------------------------
// Root
// ---------------------------------------------------------------------------

export const AboutViteRoot = React.forwardRef<HTMLElement, AboutViteRootProps>(
  (
    {
      className,
      children,
      srTitle = "About us",
      title = "Built with intention",
      subtitle = "from day one",
      description = "We believe developer tools should be as polished as the products they help create.",
      storyHeading = "Our story",
      storyParagraphs = defaultStoryParagraphs,
      values = defaultValues,
      shaderProps,
      ...props
    },
    ref
  ) => {
    const mergedShaderProps = React.useMemo(
      () => ({ ...defaultShaderProps, ...shaderProps }),
      [shaderProps]
    );

    const contextValue = React.useMemo<AboutViteContextValue>(
      () => ({
        srTitle,
        title,
        subtitle,
        description,
        storyHeading,
        storyParagraphs,
        values,
        shaderProps: mergedShaderProps,
      }),
      [srTitle, title, subtitle, description, storyHeading, storyParagraphs, values, mergedShaderProps]
    );

    return (
      <AboutViteContext.Provider value={contextValue}>
        <section
          className={cn("relative w-full overflow-hidden", className)}
          data-slot="about-vite-root"
          ref={ref}
          {...props}
        >
          <h2 className="sr-only">{srTitle}</h2>
          {children}
        </section>
      </AboutViteContext.Provider>
    );
  }
);
AboutViteRoot.displayName = "AboutViteRoot";

// ---------------------------------------------------------------------------
// Background
// ---------------------------------------------------------------------------

export function AboutViteBackground({ className, ...props }: React.ComponentPropsWithoutRef<"div">) {
  return (
    <div
      aria-hidden
      className={cn("pointer-events-none absolute inset-0", className)}
      data-slot="about-vite-background"
      {...props}
    >
      <div
        className="absolute inset-0"
        style={{
          background: `
            radial-gradient(ellipse 70% 50% at 30% 70%, rgba(237,64,179,0.06) 0%, transparent 60%),
            radial-gradient(ellipse 60% 40% at 70% 30%, rgba(110,247,204,0.05) 0%, transparent 60%),
            radial-gradient(ellipse 50% 50% at 50% 50%, rgba(173,250,30,0.03) 0%, transparent 60%)
          `,
        }}
      />
    </div>
  );
}

// ---------------------------------------------------------------------------
// Container
// ---------------------------------------------------------------------------

export function AboutViteContainer({ className, ...props }: React.ComponentPropsWithoutRef<"div">) {
  return (
    <div
      className={cn(
        "container relative z-10 flex flex-col gap-12 py-16 sm:gap-16 sm:py-20 lg:gap-20 lg:py-28",
        className
      )}
      data-slot="about-vite-container"
      {...props}
    />
  );
}

// ---------------------------------------------------------------------------
// Heading
// ---------------------------------------------------------------------------

export interface AboutViteHeadingProps extends Omit<React.ComponentPropsWithoutRef<"div">, "title"> {
  title?: React.ReactNode;
  subtitle?: React.ReactNode;
  headingClassName?: string;
}

export function AboutViteHeading({
  className,
  title,
  subtitle,
  headingClassName,
  children,
  ...props
}: AboutViteHeadingProps) {
  const context = useAboutViteContext();
  const resolvedTitle = title ?? context.title;
  const resolvedSubtitle = subtitle ?? context.subtitle;

  return (
    <div className={cn("text-center", className)} data-slot="about-vite-heading-wrap" {...props}>
      {children ?? (
        <div
          aria-hidden="true"
          className={cn(
            "text-balance font-medium text-3xl tracking-[-0.04em] sm:text-4xl md:text-5xl lg:tracking-[-0.06em] xl:text-6xl",
            headingClassName
          )}
          data-slot="about-vite-heading"
        >
          {typeof resolvedTitle === "string" ? <AnimatedWords>{resolvedTitle}</AnimatedWords> : resolvedTitle}
          <br className="hidden sm:block" />
          {resolvedSubtitle && (
            <span className="text-foreground/50">
              {" "}
              {typeof resolvedSubtitle === "string" ? (
                <AnimatedWords>{resolvedSubtitle}</AnimatedWords>
              ) : (
                resolvedSubtitle
              )}
            </span>
          )}
        </div>
      )}
    </div>
  );
}

// ---------------------------------------------------------------------------
// Description
// ---------------------------------------------------------------------------

export interface AboutViteDescriptionProps extends HTMLMotionProps<"div"> {
  description?: React.ReactNode;
  descriptionClassName?: string;
}

export function AboutViteDescription({
  className,
  description,
  descriptionClassName,
  children,
  ...props
}: AboutViteDescriptionProps) {
  const context = useAboutViteContext();
  const resolvedDescription = description ?? context.description;
  const ref = React.useRef<HTMLDivElement>(null);
  const isInView = useInView(ref, { once: true, margin: "-60px" });

  return (
    <motion.div
      animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 16 }}
      className={cn("mx-auto max-w-2xl text-center", className)}
      data-slot="about-vite-description-wrap"
      initial={{ opacity: 0, y: 16 }}
      ref={ref}
      transition={{ duration: 0.6, delay: 0.3, ease: [0.25, 0.4, 0.25, 1] }}
      {...props}
    >
      {children ?? (
        <p
          className={cn("text-pretty text-base text-foreground/60 sm:text-lg", descriptionClassName)}
          data-slot="about-vite-description"
        >
          {resolvedDescription}
        </p>
      )}
    </motion.div>
  );
}

// ---------------------------------------------------------------------------
// Story (two-column: text left, shader visual right)
// ---------------------------------------------------------------------------

export interface AboutViteStoryProps extends React.ComponentPropsWithoutRef<"div"> {
  storyHeading?: React.ReactNode;
  storyParagraphs?: React.ReactNode[];
  shaderProps?: Partial<React.ComponentProps<typeof ColorPanels>>;
}

export function AboutViteStory({
  className,
  storyHeading,
  storyParagraphs,
  shaderProps,
  children,
  ...props
}: AboutViteStoryProps) {
  const context = useAboutViteContext();

  if (children) {
    return (
      <div className={cn("relative", className)} data-slot="about-vite-story" {...props}>
        {children}
      </div>
    );
  }

  return (
    <div
      className={cn(
        "relative grid gap-8 sm:gap-10 lg:grid-cols-[1fr_minmax(280px,420px)] lg:items-center lg:gap-16 xl:grid-cols-[1fr_1fr]",
        className
      )}
      data-slot="about-vite-story"
      {...props}
    >
      <AboutViteStoryText
        storyHeading={storyHeading ?? context.storyHeading}
        storyParagraphs={storyParagraphs ?? context.storyParagraphs}
      />
      <AboutViteStoryVisual shaderProps={shaderProps ?? context.shaderProps} />
      <AboutViteStoryMobileVisual shaderProps={shaderProps ?? context.shaderProps} />
    </div>
  );
}

// ---------------------------------------------------------------------------
// StoryText
// ---------------------------------------------------------------------------

export interface AboutViteStoryTextProps extends HTMLMotionProps<"div"> {
  storyHeading?: React.ReactNode;
  storyParagraphs?: React.ReactNode[];
}

export function AboutViteStoryText({
  className,
  storyHeading,
  storyParagraphs,
  children,
  ...props
}: AboutViteStoryTextProps) {
  const context = useAboutViteContext();
  const resolvedHeading = storyHeading ?? context.storyHeading;
  const resolvedParagraphs = storyParagraphs ?? context.storyParagraphs;
  const ref = React.useRef<HTMLDivElement>(null);
  const isInView = useInView(ref, { once: true, margin: "-80px" });

  return (
    <motion.div
      animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
      className={cn("flex flex-col gap-5 text-center lg:text-left", className)}
      data-slot="about-vite-story-text"
      initial={{ opacity: 0, y: 20 }}
      ref={ref}
      transition={{ duration: 0.6, delay: 0.2, ease: [0.25, 0.4, 0.25, 1] }}
      {...props}
    >
      {children ?? (
        <>
          {resolvedHeading && (
            <h3
              className="font-mono text-xs uppercase tracking-[0.2em]"
              data-slot="about-vite-story-heading"
              style={{
                backgroundImage: `linear-gradient(90deg, ${VITE_COLORS[0]}, ${VITE_COLORS[3]})`,
                WebkitBackgroundClip: "text",
                WebkitTextFillColor: "transparent",
                backgroundClip: "text",
              }}
            >
              {resolvedHeading}
            </h3>
          )}
          <div className="flex flex-col gap-4">
            {resolvedParagraphs.map((paragraph, i) => (
              <p className="text-foreground/60 text-sm leading-relaxed sm:text-base lg:text-lg" key={i}>
                {paragraph}
              </p>
            ))}
          </div>
        </>
      )}
    </motion.div>
  );
}

// ---------------------------------------------------------------------------
// StoryVisual (desktop shader)
// ---------------------------------------------------------------------------

export interface AboutViteStoryVisualProps
  extends Omit<React.ComponentPropsWithoutRef<"div">, "onDrag" | "onDragEnd" | "onDragStart" | "onDragEnter" | "onDragExit" | "onDragLeave" | "onDragOver" | "onDrop" | "onAnimationStart" | "onAnimationEnd" | "onAnimationIteration"> {
  shaderProps?: Partial<React.ComponentProps<typeof ColorPanels>>;
}

export function AboutViteStoryVisual({ className, shaderProps, ...props }: AboutViteStoryVisualProps) {
  const context = useAboutViteContext();
  const resolvedShaderProps = { ...context.shaderProps, ...shaderProps };
  const ref = React.useRef<HTMLDivElement>(null);
  const isInView = useInView(ref, { once: true, margin: "-60px" });

  return (
    <motion.div
      animate={isInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.95 }}
      className={cn("relative hidden h-[300px] lg:block lg:h-[360px] xl:h-[400px]", className)}
      data-slot="about-vite-story-visual"
      initial={{ opacity: 0, scale: 0.95 }}
      ref={ref}
      transition={{ duration: 0.8, delay: 0.3, ease: [0.25, 0.4, 0.25, 1] as const }}
      {...props}
    >
      <div
        className="absolute inset-0 overflow-hidden rounded-2xl [outline-offset:-1px] [outline:1px_solid_rgba(0,0,0,0.1)] dark:[outline-color:rgba(255,255,255,0.1)]"
        data-slot="about-vite-story-shader"
      >
        <MemoizedColorPanels
          {...resolvedShaderProps}
          style={{ width: "100%", height: "100%", ...(resolvedShaderProps.style as React.CSSProperties | undefined) }}
        />
      </div>
    </motion.div>
  );
}

// ---------------------------------------------------------------------------
// StoryMobileVisual (mobile shader behind story text)
// ---------------------------------------------------------------------------

export interface AboutViteStoryMobileVisualProps extends React.ComponentPropsWithoutRef<"div"> {
  shaderProps?: Partial<React.ComponentProps<typeof ColorPanels>>;
}

export function AboutViteStoryMobileVisual({ className, shaderProps, ...props }: AboutViteStoryMobileVisualProps) {
  const context = useAboutViteContext();
  const resolvedShaderProps = { ...context.shaderProps, ...shaderProps };

  return (
    <div
      className={cn(
        "-z-10 pointer-events-none absolute inset-x-0 top-0 h-[320px] overflow-hidden lg:hidden",
        className
      )}
      data-slot="about-vite-story-mobile-visual"
      {...props}
    >
      <div className="absolute inset-x-0 bottom-0 z-10 h-44 bg-gradient-to-t from-background via-background/90 to-transparent" />
      <div className="absolute inset-x-0 top-0 z-10 h-24 bg-gradient-to-b from-background via-background/60 to-transparent" />
      <MemoizedColorPanels
        {...resolvedShaderProps}
        style={{ width: "100%", height: "100%", ...(resolvedShaderProps.style as React.CSSProperties | undefined) }}
      />
    </div>
  );
}

// ---------------------------------------------------------------------------
// Values (grid wrapper)
// ---------------------------------------------------------------------------

export interface AboutViteValuesProps extends Omit<HTMLMotionProps<"div">, "values"> {
  values?: AboutViteValue[];
}

export function AboutViteValues({ className, values, children, ...props }: AboutViteValuesProps) {
  const context = useAboutViteContext();
  const resolvedValues = values ?? context.values;
  const ref = React.useRef<HTMLDivElement>(null);
  const isInView = useInView(ref, { once: true, margin: "-80px" });

  return (
    <motion.div
      animate={isInView ? "visible" : "hidden"}
      className={cn("grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3", className)}
      data-slot="about-vite-values"
      initial="hidden"
      ref={ref}
      variants={valuesGridVariants}
      {...props}
    >
      {children ?? resolvedValues.map((value) => <AboutViteValueCard key={value.name} value={value} />)}
    </motion.div>
  );
}

// ---------------------------------------------------------------------------
// ValueCard
// ---------------------------------------------------------------------------

export interface AboutViteValueCardProps extends HTMLMotionProps<"div"> {
  value: AboutViteValue;
}

export function AboutViteValueCard({ className, value, ...props }: AboutViteValueCardProps) {
  const accent = value.accentColor ?? VITE_COLORS[0];
  const Icon = value.icon;

  return (
    <motion.div
      className={cn(
        "group relative flex flex-col gap-4 overflow-hidden rounded-xl bg-card p-6 transition-shadow duration-200 sm:p-8",
        "shadow-[0px_0px_0px_1px_rgba(0,0,0,0.06),0px_2px_4px_-1px_rgba(0,0,0,0.08),0px_8px_24px_-4px_rgba(0,0,0,0.08)]",
        "dark:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.06),0px_2px_4px_-1px_rgba(255,255,255,0.04),0px_8px_24px_-4px_rgba(0,0,0,0.35)]",
        "hover:shadow-[0px_0px_0px_1px_rgba(0,0,0,0.08),0px_4px_6px_-1px_rgba(0,0,0,0.1),0px_12px_32px_-4px_rgba(0,0,0,0.1)]",
        "dark:hover:shadow-[0px_0px_0px_1px_rgba(255,255,255,0.1),0px_4px_6px_-1px_rgba(255,255,255,0.05),0px_12px_32px_-4px_rgba(0,0,0,0.45)]",
        className
      )}
      data-slot="about-vite-value-card"
      variants={valueCardVariants}
      {...props}
    >
      {Icon && (
        <div
          className="flex size-10 items-center justify-center rounded-lg"
          style={{ backgroundColor: `${accent}14` }}
        >
          <span className="contents" style={{ color: accent }}>
            <Icon className="size-5" />
          </span>
        </div>
      )}

      <div className="flex flex-col gap-1.5">
        <span className="font-semibold text-base tracking-tight">{value.name}</span>
        <p className="text-muted-foreground text-sm leading-relaxed">{value.description}</p>
      </div>
    </motion.div>
  );
}

// ---------------------------------------------------------------------------
// Composed shorthand
// ---------------------------------------------------------------------------

export interface AboutViteProps extends AboutViteRootProps {
  containerClassName?: string;
  headingWrapClassName?: string;
  headingClassName?: string;
  descriptionWrapClassName?: string;
  descriptionClassName?: string;
  storyClassName?: string;
  valuesClassName?: string;
}

export function AboutVite({
  containerClassName,
  headingWrapClassName,
  headingClassName,
  descriptionWrapClassName,
  descriptionClassName,
  storyClassName,
  valuesClassName,
  ...props
}: AboutViteProps) {
  return (
    <AboutViteRoot {...props}>
      <AboutViteBackground />
      <AboutViteContainer className={containerClassName}>
        <AboutViteHeading className={headingWrapClassName} headingClassName={headingClassName} />
        <AboutViteDescription className={descriptionWrapClassName} descriptionClassName={descriptionClassName} />
        <AboutViteStory className={storyClassName} />
        <AboutViteValues className={valuesClassName} />
      </AboutViteContainer>
    </AboutViteRoot>
  );
}

export default AboutVite;
Marketing About Vite

Marketing About Vite
