// Reusable primitives: Button, Section, Eyebrow, Pill, ImagePh

const Button = ({
  size = 'medium',
  intent = 'primary',
  as: As = 'button',
  href,
  children,
  className = '',
  iconLeft,
  iconRight,
  ...rest
}) => {
  const sizes = {
    main: 'px-7 py-4 text-[17px] font-semibold rounded-full h-14',
    medium: 'px-6 py-3 text-[15px] font-semibold rounded-full h-12',
    light: 'p-0 text-[15px] font-medium underline-offset-4 hover:underline'
  };
  const intents = {
    primary: 'bg-accent text-white hover:bg-accent-hover shadow-button hover:shadow-button-hover transition-all',
    ghost: 'bg-transparent border border-border text-text-primary hover:bg-white transition-all',
    dark: 'bg-dark text-white hover:bg-dark-soft transition-all',
    link: 'text-accent hover:text-accent-hover transition-colors'
  };
  const cls = `${sizes[size]} ${intents[intent]} inline-flex items-center justify-center gap-2 ${className}`;

  if (As === 'a' || href) {
    return (
      <a href={href} className={cls} {...rest}>
        {iconLeft}
        <span>{children}</span>
        {iconRight}
      </a>);

  }
  return (
    <As className={cls} {...rest}>
      {iconLeft}
      <span>{children}</span>
      {iconRight}
    </As>);

};

const Section = ({ id, children, className = '', container = true, dark = false }) =>
<section id={id} className={`${dark ? 'bg-dark text-white' : ''} py-16 md:py-24 ${className}`}>
    {container ? <div className="max-w-content mx-auto px-5 md:px-8">{children}</div> : children}
  </section>;


const Eyebrow = ({ children, dark = false, className = '' }) =>
<div className={`inline-flex items-center text-label uppercase tracking-[0.18em] ${dark ? 'text-text-muted' : 'text-text-secondary'} ${className}`}>
    <span>{children}</span>
  </div>;


const Pill = ({ children, className = '' }) =>
<span className={`inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full bg-white/85 backdrop-blur text-[13px] font-medium text-text-primary border border-border ${className}`}>
    {children}
  </span>;


// Image placeholder with subtle stripes — used when no real photo provided
const ImagePh = ({ label, className = '', tone = 'cream', children }) => {
  const tones = {
    cream: 'ph-stripes',
    dark: 'bg-[#3a342e] text-white',
    accent: 'bg-[#E9D2B5]'
  };
  return (
    <div className={`relative overflow-hidden rounded-lg ${tones[tone]} ${className}`}>
      <div className="absolute inset-0 flex items-end justify-start p-3">
        <span className="text-[10px] tracking-[0.18em] uppercase font-mono opacity-60">
          {label || 'photo'}
        </span>
      </div>
      {children}
    </div>);

};

// Photo image with graceful fallback to placeholder
const Photo = ({ src, alt = '', label, className = '', tone = 'cream', position = 'center' }) => {
  const [error, setError] = React.useState(false);
  if (error || !src) return <ImagePh label={label || alt} className={className} tone={tone} />;
  return (
    <div className={`relative overflow-hidden rounded-lg bg-bg ${className}`}>
      <img
        src={src}
        alt={alt}
        loading="lazy"
        onError={() => setError(true)}
        className="w-full h-full object-cover"
        style={{ objectPosition: position }} />
      
    </div>);

};

// Stats / number badge inline
const Stat = ({ value, label, className = '' }) =>
<div className={className}>
    <div className="font-display text-[clamp(28px,3vw,40px)] font-medium leading-none tracking-tight">{value}</div>
    <div className="mt-2 text-small text-text-secondary leading-snug">{label}</div>
  </div>;


// Section divider — thin line with a rotated highlight diamond, editorial style
const SectionDivider = ({ className = '' }) => (
  <div className={`relative flex items-center justify-center py-2 ${className}`}>
    <div className="absolute inset-x-0 top-1/2 -translate-y-1/2 h-px bg-border" />
    <div
      className="relative z-10 h-[10px] w-[10px] rotate-45 bg-highlight"
      style={{ boxShadow: '0 0 0 4px #FAF8F5' }}
    />
  </div>
);


Object.assign(window, { Button, Section, Eyebrow, Pill, ImagePh, Photo, Stat, SectionDivider });