'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React, { useState } from 'react';
import { cn } from '@/lib/utils';
import { Copy, Check, ArrowRight, GithubLogo, Terminal, ArrowUpRight, RocketLaunch } from '@phosphor-icons/react';
import { getPhosphorIcon } from '@/lib/utils/icons';
// Direct icon map for commonly used icons (fallback if dynamic import fails)
const iconMap = {
    'arrow-right': ArrowRight,
    'github-logo': GithubLogo,
    'terminal': Terminal,
    'arrow-up-right': ArrowUpRight,
    'rocket-launch': RocketLaunch
};
export function Hero({ children, className, variant = 'transparent', align = 'center', minHeight = 'md' }) {
    const variantStyles = {
        default: 'bg-background text-foreground',
        gradient: 'bg-gradient-to-b from-background via-background to-muted/30 text-foreground',
        dark: 'bg-zinc-950 text-white [&_.landing-tagline]:text-zinc-400 [&_.landing-headline]:text-white [&_.landing-description]:text-zinc-300 [&_.landing-button]:border-zinc-600',
        light: 'bg-white text-zinc-900 [&_.landing-tagline]:text-zinc-500 [&_.landing-headline]:text-zinc-900 [&_.landing-description]:text-zinc-600 [&_.landing-button]:border-zinc-300',
        pattern: 'bg-background bg-[radial-gradient(ellipse_at_top,_var(--tw-gradient-stops))] from-primary/10 via-background to-background text-foreground',
        transparent: 'bg-transparent text-foreground'
    };
    const alignStyles = {
        top: 'items-start pt-12',
        center: 'items-center',
        bottom: 'items-end pb-12'
    };
    const heightStyles = {
        sm: 'min-h-[40vh]',
        md: 'min-h-[60vh]',
        lg: 'min-h-[80vh]',
        full: 'min-h-screen'
    };
    return /*#__PURE__*/ _jsx("section", {
        className: cn('landing-hero w-full flex flex-col justify-center', variantStyles[variant], alignStyles[align], heightStyles[minHeight], className),
        children: /*#__PURE__*/ _jsx("div", {
            className: "landing-hero-content w-full max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 text-center",
            children: children
        })
    });
}
export function Pre({ children, className, size = 'md', align = 'center', color = 'default', leading = 'tight', decorative = false }) {
    const sizeStyles = {
        xs: 'text-[0.5rem] sm:text-xs',
        sm: 'text-xs sm:text-sm',
        md: 'text-sm sm:text-base md:text-lg',
        lg: 'text-base sm:text-lg md:text-xl lg:text-2xl',
        xl: 'text-lg sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl'
    };
    const alignStyles = {
        left: 'text-left',
        center: 'text-center mx-auto',
        right: 'text-right ml-auto'
    };
    const colorStyles = {
        default: 'text-foreground',
        muted: 'text-muted-foreground',
        primary: 'text-primary',
        white: 'text-white'
    };
    const leadingStyles = {
        none: 'leading-none',
        tight: 'leading-tight',
        normal: 'leading-normal',
        relaxed: 'leading-relaxed'
    };
    return /*#__PURE__*/ _jsx("pre", {
        className: cn('landing-pre font-mono whitespace-pre select-none overflow-x-auto', sizeStyles[size], alignStyles[align], colorStyles[color], leadingStyles[leading], className),
        "aria-hidden": decorative,
        children: children
    });
}
export function Tagline({ children, className, variant = 'default', tracking = 'wider' }) {
    const variantStyles = {
        default: '',
        muted: 'opacity-60',
        accent: 'text-primary'
    };
    const trackingStyles = {
        normal: 'tracking-normal',
        wide: 'tracking-wide',
        wider: 'tracking-wider',
        widest: 'tracking-widest'
    };
    // Use div instead of p to avoid hydration errors when MDX wraps content in <p>
    return /*#__PURE__*/ _jsx("div", {
        className: cn('landing-tagline text-sm sm:text-base font-medium uppercase', variantStyles[variant], trackingStyles[tracking], className),
        children: children
    });
}
export function Headline({ children, className, size = 'xl', weight = 'normal' }) {
    const sizeStyles = {
        md: 'text-xl sm:text-2xl md:text-3xl',
        lg: 'text-2xl sm:text-3xl md:text-4xl',
        xl: 'text-3xl sm:text-4xl md:text-5xl',
        '2xl': 'text-4xl sm:text-5xl md:text-6xl'
    };
    const weightStyles = {
        normal: 'font-normal',
        medium: 'font-medium',
        semibold: 'font-semibold',
        bold: 'font-bold'
    };
    return /*#__PURE__*/ _jsx("h1", {
        className: cn('landing-headline leading-tight', sizeStyles[size], weightStyles[weight], className),
        children: children
    });
}
export function Description({ children, className, size = 'lg', maxWidth = 'lg' }) {
    const sizeStyles = {
        sm: 'text-sm sm:text-base',
        md: 'text-base sm:text-lg',
        lg: 'text-lg sm:text-xl'
    };
    const maxWidthStyles = {
        sm: 'max-w-md',
        md: 'max-w-xl',
        lg: 'max-w-2xl',
        full: 'max-w-full'
    };
    // Use div instead of p to avoid hydration errors when MDX wraps content in <p>
    return /*#__PURE__*/ _jsx("div", {
        className: cn('landing-description opacity-80 mx-auto', sizeStyles[size], maxWidthStyles[maxWidth], className),
        children: children
    });
}
export function CommandBox({ command, prefix = '$', className, variant = 'default' }) {
    const [copied, setCopied] = useState(false);
    const handleCopy = async ()=>{
        try {
            await navigator.clipboard.writeText(command);
            setCopied(true);
            setTimeout(()=>setCopied(false), 2000);
        } catch (err) {
            console.error('Failed to copy:', err);
        }
    };
    const variantStyles = {
        default: 'bg-zinc-950 border border-zinc-800 shadow-lg',
        minimal: 'bg-zinc-900',
        bordered: 'bg-zinc-950 border-2 border-zinc-700',
        light: 'bg-muted border border-border shadow-sm'
    };
    const textStyles = {
        default: 'text-white',
        minimal: 'text-white',
        bordered: 'text-white',
        light: 'text-foreground'
    };
    const prefixStyles = {
        default: 'text-zinc-400',
        minimal: 'text-zinc-400',
        bordered: 'text-zinc-400',
        light: 'text-muted-foreground'
    };
    const buttonStyles = {
        default: 'text-zinc-300 hover:text-white hover:bg-zinc-700',
        minimal: 'text-zinc-300 hover:text-white hover:bg-zinc-700',
        bordered: 'text-zinc-300 hover:text-white hover:bg-zinc-700',
        light: 'text-muted-foreground hover:text-foreground hover:bg-muted-foreground/10'
    };
    return /*#__PURE__*/ _jsxs("div", {
        className: cn('landing-command-box inline-flex items-center gap-3 rounded-lg px-4 py-3', variantStyles[variant], className),
        children: [
            /*#__PURE__*/ _jsxs("code", {
                className: cn('flex items-center gap-2 font-mono text-sm sm:text-base', textStyles[variant]),
                children: [
                    prefix && /*#__PURE__*/ _jsx("span", {
                        className: cn('select-none', prefixStyles[variant]),
                        children: prefix
                    }),
                    /*#__PURE__*/ _jsx("span", {
                        children: command
                    })
                ]
            }),
            /*#__PURE__*/ _jsx("button", {
                type: "button",
                onClick: handleCopy,
                className: cn('p-1.5 rounded transition-colors', 'focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50', buttonStyles[variant]),
                title: "Copy command",
                children: copied ? /*#__PURE__*/ _jsx(Check, {
                    className: "h-4 w-4 text-emerald-500",
                    weight: "bold"
                }) : /*#__PURE__*/ _jsx(Copy, {
                    className: "h-4 w-4"
                })
            })
        ]
    });
}
export function Section({ children, className, id, variant = 'transparent', padding = 'lg' }) {
    const variantStyles = {
        default: 'bg-background text-foreground',
        muted: 'bg-muted/30 text-foreground',
        dark: 'bg-zinc-950 text-white [&_.landing-tagline]:text-zinc-400 [&_.landing-headline]:text-white [&_.landing-description]:text-zinc-300 [&_.landing-feature-title]:text-white [&_.landing-feature-description]:text-zinc-400 [&_.landing-button]:border-zinc-600',
        light: 'bg-white text-zinc-900 [&_.landing-tagline]:text-zinc-500 [&_.landing-headline]:text-zinc-900 [&_.landing-description]:text-zinc-600 [&_.landing-feature-title]:text-zinc-900 [&_.landing-feature-description]:text-zinc-600 [&_.landing-button]:border-zinc-300',
        accent: 'bg-primary/5 text-foreground',
        transparent: 'bg-transparent text-foreground'
    };
    const paddingStyles = {
        none: '',
        sm: 'py-8 sm:py-12',
        md: 'py-12 sm:py-16',
        lg: 'py-16 sm:py-24',
        xl: 'py-24 sm:py-32'
    };
    return /*#__PURE__*/ _jsx("section", {
        id: id,
        className: cn('landing-section w-full', variantStyles[variant], paddingStyles[padding], className),
        children: /*#__PURE__*/ _jsx("div", {
            className: "landing-section-content max-w-5xl mx-auto px-4 sm:px-6 lg:px-8",
            children: children
        })
    });
}
export function Center({ children, className, gap = 'md' }) {
    const gapStyles = {
        none: '',
        sm: 'space-y-2',
        md: 'space-y-4',
        lg: 'space-y-8'
    };
    return /*#__PURE__*/ _jsx("div", {
        className: cn('landing-center flex flex-col items-center text-center', gapStyles[gap], className),
        children: children
    });
}
export function FeatureGrid({ children, className, cols = 3 }) {
    const colStyles = {
        2: 'grid-cols-1 md:grid-cols-2',
        3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',
        4: 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4'
    };
    return /*#__PURE__*/ _jsx("div", {
        className: cn('landing-feature-grid grid gap-6', colStyles[cols], className),
        children: children
    });
}
export function FeatureItem({ children, title, icon, className }) {
    return /*#__PURE__*/ _jsxs("div", {
        className: cn('landing-feature-item p-6 rounded-xl border border-border/50 bg-transparent', 'hover:border-primary/30 hover:bg-muted/30 transition-colors', className),
        children: [
            icon && /*#__PURE__*/ _jsx("div", {
                className: "landing-feature-icon mb-4 text-primary text-2xl",
                children: icon
            }),
            title && /*#__PURE__*/ _jsx("h3", {
                className: "landing-feature-title text-lg font-semibold mb-2",
                children: title
            }),
            children && /*#__PURE__*/ _jsx("div", {
                className: "landing-feature-description text-sm opacity-80",
                children: children
            })
        ]
    });
}
export function ButtonLink({ href, children, className, variant = 'primary', size = 'md', icon, iconPosition = 'right' }) {
    const variantStyles = {
        primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        outline: 'border border-current/30 bg-transparent text-current hover:bg-current/10',
        ghost: 'bg-transparent text-current hover:bg-current/10'
    };
    const sizeStyles = {
        sm: 'px-3 py-1.5 text-sm',
        md: 'px-4 py-2 text-base',
        lg: 'px-6 py-3 text-lg'
    };
    const iconSizes = {
        sm: 'h-4 w-4',
        md: 'h-5 w-5',
        lg: 'h-5 w-5'
    };
    // Try direct map first, then dynamic lookup
    const IconComponent = icon ? iconMap[icon] || getPhosphorIcon(icon) : null;
    return /*#__PURE__*/ _jsxs("a", {
        href: href,
        className: cn('landing-button inline-flex items-center justify-center gap-2 rounded-lg font-medium', 'transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/50', variantStyles[variant], sizeStyles[size], className),
        children: [
            IconComponent && iconPosition === 'left' && /*#__PURE__*/ _jsx(IconComponent, {
                className: iconSizes[size],
                weight: "bold"
            }),
            children,
            IconComponent && iconPosition === 'right' && /*#__PURE__*/ _jsx(IconComponent, {
                className: iconSizes[size],
                weight: "bold"
            })
        ]
    });
}
export function Spacer({ size = 'md', className }) {
    const sizeStyles = {
        xs: 'h-2',
        sm: 'h-4',
        md: 'h-8',
        lg: 'h-12',
        xl: 'h-16',
        '2xl': 'h-24'
    };
    return /*#__PURE__*/ _jsx("div", {
        className: cn('landing-spacer', sizeStyles[size], className)
    });
}
export function Divider({ className, variant = 'solid' }) {
    const variantStyles = {
        solid: 'border-t border-border',
        dashed: 'border-t border-dashed border-border',
        gradient: 'h-px bg-gradient-to-r from-transparent via-border to-transparent border-none'
    };
    return /*#__PURE__*/ _jsx("hr", {
        className: cn('landing-divider w-full my-8', variantStyles[variant], className)
    });
}
