'use client';

import type { ReactNode } from 'react';
import { motion } from 'framer-motion';
import { usePrefersReducedMotion } from '@/lib/motion';

// Line-art frame for the strategist's portrait. Built so it reads as
// deliberate with today's placeholder inside and accepts the real photograph
// when it arrives without any rework: the frame never assumes what it wraps.
//
// The gold arc traces roughly three quarters of the circle and draws itself in
// — an open frame, not a closed badge.
export function MarcoRetrato({ children, className = '' }: { children: ReactNode; className?: string }) {
  const reduced = usePrefersReducedMotion();

  return (
    <div className={`relative w-44 h-44 md:w-64 md:h-64 shrink-0 ${className}`}>
      <svg viewBox="0 0 100 100" className="absolute -inset-3 w-[calc(100%+1.5rem)] h-[calc(100%+1.5rem)] text-dorado" aria-hidden="true" focusable="false">
        {reduced ? (
          <circle
            cx={50}
            cy={50}
            r={47}
            fill="none"
            stroke="currentColor"
            strokeWidth={1.5}
            strokeLinecap="round"
            strokeDasharray="220 295"
            transform="rotate(-120 50 50)"
          />
        ) : (
          <motion.circle
            cx={50}
            cy={50}
            r={47}
            fill="none"
            stroke="currentColor"
            strokeWidth={1.5}
            strokeLinecap="round"
            strokeDasharray="220 295"
            transform="rotate(-120 50 50)"
            initial={{ pathLength: 0, opacity: 0 }}
            whileInView={{ pathLength: 1, opacity: 1 }}
            viewport={{ once: true, amount: 0.4 }}
            transition={{ duration: 1.2, ease: [0.22, 1, 0.36, 1] }}
          />
        )}
      </svg>
      <div className="relative w-full h-full rounded-full overflow-hidden">{children}</div>
    </div>
  );
}