inogen/app/components/ui/brand-logo.tsx

import React from "react";
import { cn } from "~/lib/utils";

interface BrandLogoProps {
  variant?: "full" | "icon" | "text";
  size?: "sm" | "md" | "lg" | "xl";
  className?: string;
  showCompany?: boolean;
}

export function BrandLogo({
  variant = "full",
  size = "md",
  className,
  showCompany = false
}: BrandLogoProps) {
  const sizes = {
    sm: {
      icon: "w-6 h-6",
      text: "text-sm",
      container: "gap-2"
    },
    md: {
      icon: "w-8 h-8",
      text: "text-base",
      container: "gap-3"
    },
    lg: {
      icon: "w-10 h-10",
      text: "text-lg",
      container: "gap-3"
    },
    xl: {
      icon: "w-12 h-12",
      text: "text-xl",
      container: "gap-4"
    }
  };

  const sizeConfig = sizes[size];

  const LogoIcon = () => (
    <svg
      viewBox="0 0 40 40"
      fill="none"
      className={cn(sizeConfig.icon, "text-current")}
    >
      <path
        d="M20 4L36 20L20 36L4 20L20 4Z"
        fill="currentColor"
        className="opacity-90"
      />
      <path
        d="M20 12L28 20L20 28L12 20L20 12Z"
        fill="currentColor"
        className="opacity-60"
      />
      <circle
        cx="20"
        cy="20"
        r="3"
        fill="currentColor"
        className="opacity-100"
      />
    </svg>
  );

  const BrandText = () => (
    <div className={cn("font-persian font-bold leading-tight", sizeConfig.text)}>
      <div>پردازشی</div>
      <div>اینوژن</div>
    </div>
  );

  const CompanyText = () => (
    <div className="text-xs font-persian text-current opacity-75 mt-1">
      توسعه‌یافته توسط شرکت رهبران دانش و فناوری فرا
    </div>
  );

  if (variant === "icon") {
    return (
      <div className={cn("flex items-center justify-center", className)}>
        <LogoIcon />
      </div>
    );
  }

  if (variant === "text") {
    return (
      <div className={className}>
        <BrandText />
        {showCompany && <CompanyText />}
      </div>
    );
  }

  return (
    <div className={cn("flex items-center", sizeConfig.container, className)}>
      <LogoIcon />
      <div>
        <BrandText />
        {showCompany && <CompanyText />}
      </div>
    </div>
  );
}

interface InogenLogoProps {
  size?: "sm" | "md" | "lg";
  className?: string;
  animated?: boolean;
}

export function InogenLogo({ size = "md", className, animated = false }: InogenLogoProps) {
  const sizes = {
    sm: "w-8 h-8",
    md: "w-10 h-10",
    lg: "w-12 h-12"
  };

  return (
    <div className={cn("relative", sizes[size], className)}>
      <svg
        viewBox="0 0 40 40"
        fill="none"
        className={cn(
          "w-full h-full",
          animated && "transition-transform duration-300 hover:scale-110"
        )}
      >
        {/* Outer diamond */}
        <path
          d="M20 2L38 20L20 38L2 20L20 2Z"
          fill="currentColor"
          className="text-primary opacity-20"
        />

        {/* Middle diamond */}
        <path
          d="M20 6L34 20L20 34L6 20L20 6Z"
          fill="currentColor"
          className="text-primary opacity-40"
        />

        {/* Inner diamond */}
        <path
          d="M20 10L30 20L20 30L10 20L20 10Z"
          fill="currentColor"
          className="text-primary opacity-60"
        />

        {/* Center diamond */}
        <path
          d="M20 14L26 20L20 26L14 20L20 14Z"
          fill="currentColor"
          className="text-primary opacity-80"
        />

        {/* Core circle */}
        <circle
          cx="20"
          cy="20"
          r="3"
          fill="currentColor"
          className="text-primary"
        />

        {/* Tech lines */}
        <line
          x1="20"
          y1="8"
          x2="20"
          y2="12"
          stroke="currentColor"
          strokeWidth="1"
          className="text-primary opacity-60"
        />
        <line
          x1="20"
          y1="28"
          x2="20"
          y2="32"
          stroke="currentColor"
          strokeWidth="1"
          className="text-primary opacity-60"
        />
        <line
          x1="8"
          y1="20"
          x2="12"
          y2="20"
          stroke="currentColor"
          strokeWidth="1"
          className="text-primary opacity-60"
        />
        <line
          x1="28"
          y1="20"
          x2="32"
          y2="20"
          stroke="currentColor"
          strokeWidth="1"
          className="text-primary opacity-60"
        />
      </svg>

      {animated && (
        <div className="absolute inset-0 rounded-full bg-primary/10 animate-pulse" />
      )}
    </div>
  );
}

interface CompanyBrandingProps {
  variant?: "horizontal" | "vertical" | "compact";
  theme?: "light" | "dark";
  size?: "sm" | "md" | "lg";
  className?: string;
}

export function CompanyBranding({
  variant = "horizontal",
  theme = "light",
  size = "md",
  className
}: CompanyBrandingProps) {
  const isLight = theme === "light";

  const sizes = {
    sm: {
      logo: "w-6 h-6",
      title: "text-sm",
      subtitle: "text-xs",
      company: "text-xs"
    },
    md: {
      logo: "w-8 h-8",
      title: "text-base",
      subtitle: "text-sm",
      company: "text-xs"
    },
    lg: {
      logo: "w-10 h-10",
      title: "text-lg",
      subtitle: "text-base",
      company: "text-sm"
    }
  };

  const sizeConfig = sizes[size];

  if (variant === "compact") {
    return (
      <div className={cn("flex items-center gap-2", className)}>
        <InogenLogo size={size} />
        <div className="font-persian font-bold leading-none">
          <div className={sizeConfig.title}>اینوژن</div>
        </div>
      </div>
    );
  }

  if (variant === "vertical") {
    return (
      <div className={cn("flex flex-col items-center text-center gap-3", className)}>
        <InogenLogo size={size} />
        <div className="font-persian">
          <div className={cn("font-bold leading-tight", sizeConfig.title)}>
            پردازشی اینوژن
          </div>
          <div className={cn("opacity-75 leading-relaxed mt-1", sizeConfig.company)}>
            توسعه‌یافته توسط شرکت رهبران دانش و فناوری فرا
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className={cn("flex items-center gap-3", className)}>
      <InogenLogo size={size} />
      <div className="font-persian">
        <div className={cn("font-bold leading-tight", sizeConfig.title)}>
          پردازشی اینوژن
        </div>
        <div className={cn("opacity-75 leading-relaxed", sizeConfig.company)}>
          شرکت رهبران دانش و فناوری فرا
        </div>
      </div>
    </div>
  );
}