/* Portfolio Components — Phan Phuoc Thinh */

/* ─── Doodle SVG Decorations ─── */
function DoodleBrackets({ style, color = 'currentColor' }) {
  return (
    <svg width="50" height="56" viewBox="0 0 50 56" fill="none" style={{ opacity: 0.3, ...style }}>
      <path d="M12 4C8 4 5 7 5 11v10c0 4-3 7-5 7 2 0 5 3 5 7v10c0 4 3 7 7 7" stroke={color} strokeWidth="2" strokeLinecap="round" />
      <path d="M38 4c4 0 7 3 7 7v10c0 4 3 7 5 7-2 0-5 3-5 7v10c0 4-3 7-7 7" stroke={color} strokeWidth="2" strokeLinecap="round" />
    </svg>);

}

function DoodleArrow({ style, color = 'currentColor' }) {
  return (
    <svg width="80" height="60" viewBox="0 0 80 60" fill="none" style={{ opacity: 0.2, ...style }}>
      <path d="M5 45C15 45 35 40 50 25S70 5 75 5" stroke={color} strokeWidth="3" strokeLinecap="round" />
      <path d="M60 3l16 2-5 15" stroke={color} strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

function DoodleCircle({ style, color = 'currentColor', size = 40 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 40 40" fill="none" style={{ opacity: 0.15, ...style }}>
      <circle cx="20" cy="20" r="17" stroke={color} strokeWidth="2" strokeDasharray="4 3" />
    </svg>);

}

function DoodleCode({ style, color = 'currentColor' }) {
  return (
    <svg width="60" height="40" viewBox="0 0 60 40" fill="none" style={{ opacity: 0.25, ...style }}>
      <path d="M18 8L6 20l12 12" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M42 8l12 12-12 12" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" />
      <path d="M35 4L25 36" stroke={color} strokeWidth="2" strokeLinecap="round" />
    </svg>);

}

function DoodleChart({ style, color = 'currentColor' }) {
  return (
    <svg width="50" height="50" viewBox="0 0 50 50" fill="none" style={{ opacity: 0.2, ...style }}>
      <rect x="5" y="30" width="8" height="15" rx="2" stroke={color} strokeWidth="2" />
      <rect x="18" y="20" width="8" height="25" rx="2" stroke={color} strokeWidth="2" />
      <rect x="31" y="10" width="8" height="35" rx="2" stroke={color} strokeWidth="2" />
      <path d="M5 8l12 8 14-6 14 2" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>);

}

function DoodleStar({ style, color = 'currentColor', size = 24 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" style={{ opacity: 0.2, ...style }}>
      <path d="M12 2l2.5 7.5H22l-6 4.5 2.5 7.5-6-4.5-6 4.5 2.5-7.5-6-4.5h7.5z" stroke={color} strokeWidth="1.5" strokeLinejoin="round" />
    </svg>);

}

/* ─── Navigation ─── */
function Nav({ activeSection, onNavigate, tweaks }) {
  const navItems = [
  { id: 'home', label: 'Home', icon: 'M3 12l9-9 9 9M5 10v10a1 1 0 001 1h3a1 1 0 001-1v-4h4v4a1 1 0 001 1h3a1 1 0 001-1V10' },
  { id: 'about', label: 'About', icon: 'M12 11a4 4 0 100-8 4 4 0 000 8zM4 21v-1a6 6 0 0112 0v1M16 21v-1a6 6 0 016 0v1' },
  { id: 'experience', label: 'Experience', icon: 'M20 7H4a2 2 0 00-2 2v10a2 2 0 002 2h16a2 2 0 002-2V9a2 2 0 00-2-2zM16 7V5a2 2 0 00-2-2h-4a2 2 0 00-2 2v2' },
  { id: 'projects', label: 'Projects', icon: 'M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z' },
  { id: 'contact', label: 'Contact', icon: 'M3 5h18a2 2 0 012 2v10a2 2 0 01-2 2H3a2 2 0 01-2-2V7a2 2 0 012-2zm0 0l9 6 9-6' }];


  const primary = tweaks.primaryColor;

  return (
    <nav style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      padding: '16px 48px',
      background: 'rgba(13,27,42,0.85)', backdropFilter: 'blur(20px)',
      borderBottom: '1px solid rgba(238,238,238,0.08)',
      transition: 'all 0.3s ease'
    }}>
      <span style={{
        fontWeight: 700, fontSize: 24,
        color: primary, cursor: 'pointer', letterSpacing: '1px', fontFamily: "Times"
      }} onClick={() => onNavigate('home')}>
        Ethan<span style={{ color: '#EEEEEE', fontFamily: "Poppins" }}></span>
      </span>
      <div style={{ display: 'flex', gap: 8 }}>
        {navItems.map((item) =>
        <button key={item.id} onClick={() => onNavigate(item.id)} style={{
          display: 'flex', alignItems: 'center', gap: 8,
          padding: '10px 16px', borderRadius: 24, border: 'none',
          background: activeSection === item.id ? primary : 'transparent',
          color: activeSection === item.id ? '#0D1B2A' : '#EEEEEE',
          fontFamily: 'Poppins, sans-serif', fontWeight: 600, fontSize: 14,
          cursor: 'pointer', transition: 'all 0.3s ease'
        }}>
            <svg width="18" height="18" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
              <path d={item.icon} />
            </svg>
            {item.label}
          </button>
        )}
      </div>
    </nav>);

}

/* ─── Project Card ─── */
function ProjectCard({ project, index, onClick, tweaks }) {
  const [hovered, setHovered] = React.useState(false);
  const primary = tweaks.primaryColor;

  return (
    <div
      onClick={() => onClick(project)}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        position: 'relative', width: '100%', aspectRatio: '368/280',
        borderRadius: 16, overflow: 'hidden', cursor: 'pointer',
        background: 'rgba(57,62,70,0.5)', backdropFilter: 'blur(4px)',
        transform: hovered ? 'translateY(-8px) scale(1.02)' : 'translateY(0)',
        boxShadow: hovered ? `0 20px 40px rgba(0,0,0,0.4), 0 0 0 1px ${primary}33` : '0 4px 20px rgba(0,0,0,0.2)',
        transition: 'all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)'
      }}>
      
      <div style={{
        position: 'absolute', inset: 0,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 24
      }}>
        <img src={project.image} alt={project.title} style={{
          maxWidth: '85%', maxHeight: '75%', objectFit: 'contain',
          borderRadius: 8, transition: 'transform 0.4s ease',
          transform: hovered ? 'scale(1.05)' : 'scale(1)'
        }} />
      </div>
      <div style={{
        position: 'absolute', bottom: 0, left: 0, right: 0,
        padding: '40px 20px 16px',
        background: 'linear-gradient(transparent, rgba(13,27,42,0.95))',
        transform: hovered ? 'translateY(0)' : 'translateY(8px)',
        opacity: hovered ? 1 : 0.7,
        transition: 'all 0.4s ease'
      }}>
        <div style={{ fontSize: 11, fontWeight: 700, color: primary, letterSpacing: '2px', textTransform: 'uppercase', marginBottom: 4 }}>
          {project.category}
        </div>
        <div style={{ fontSize: 16, fontWeight: 700, color: '#FFF', fontFamily: 'Poppins, sans-serif' }}>
          {project.title}
        </div>
      </div>
    </div>);

}

/* ─── Skill Badge ─── */
function SkillBadge({ label, tweaks }) {
  const [hovered, setHovered] = React.useState(false);
  return (
    <span
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        display: 'inline-block', padding: '8px 20px', borderRadius: 24,
        background: hovered ? tweaks.primaryColor : 'rgba(57,62,70,0.6)',
        color: hovered ? '#0D1B2A' : '#EEE',
        fontFamily: 'Poppins, sans-serif', fontWeight: 600, fontSize: 14,
        transition: 'all 0.3s ease', cursor: 'default',
        border: `1px solid ${hovered ? tweaks.primaryColor : 'rgba(238,238,238,0.15)'}`
      }}>
      {label}</span>);

}

/* ─── Footer ─── */
function Footer({ onNavigate, tweaks }) {
  const primary = tweaks.primaryColor;
  const links = [
  { id: 'home', label: 'Home' },
  { id: 'about', label: 'About' },
  { id: 'experience', label: 'Experience' },
  { id: 'projects', label: 'Projects' },
  { id: 'contact', label: 'Contact' }];


  const socials = [
  { label: 'GitHub', icon: 'M12 2C6.477 2 2 6.477 2 12c0 4.42 2.865 8.166 6.839 9.489.5.092.682-.217.682-.482 0-.237-.009-.866-.013-1.7-2.782.604-3.369-1.34-3.369-1.34-.454-1.156-1.11-1.463-1.11-1.463-.908-.62.069-.608.069-.608 1.003.07 1.531 1.03 1.531 1.03.892 1.529 2.341 1.087 2.91.831.092-.646.35-1.086.636-1.336-2.22-.253-4.555-1.11-4.555-4.943 0-1.091.39-1.984 1.029-2.683-.103-.253-.446-1.27.098-2.647 0 0 .84-.268 2.75 1.026A9.578 9.578 0 0112 6.836a9.59 9.59 0 012.504.337c1.909-1.294 2.747-1.026 2.747-1.026.546 1.377.203 2.394.1 2.647.64.699 1.028 1.592 1.028 2.683 0 3.842-2.339 4.687-4.566 4.935.359.309.678.919.678 1.852 0 1.336-.012 2.415-.012 2.743 0 .267.18.579.688.481C19.137 20.164 22 16.418 22 12c0-5.523-4.477-10-10-10z' },
  { label: 'LinkedIn', icon: 'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z' },
  { label: 'Email', icon: 'M3 5h18a2 2 0 012 2v10a2 2 0 01-2 2H3a2 2 0 01-2-2V7a2 2 0 012-2zm0 0l9 6 9-6' }];


  return (
    <footer style={{
      padding: '60px 48px 40px', textAlign: 'center',
      borderTop: '1px solid rgba(238,238,238,0.08)',
      background: 'rgba(13,27,42,0.5)'
    }}>
      <div style={{ display: 'flex', justifyContent: 'center', gap: 32, marginBottom: 32 }}>
        {links.map((l) =>
        <button key={l.id} onClick={() => onNavigate(l.id)} style={{
          background: 'none', border: 'none', color: 'rgba(238,238,238,0.75)',
          fontFamily: 'Poppins, sans-serif', fontSize: 16, cursor: 'pointer',
          transition: 'color 0.3s'
        }}
        onMouseEnter={(e) => e.target.style.color = primary}
        onMouseLeave={(e) => e.target.style.color = 'rgba(238,238,238,0.75)'}>
          {l.label}</button>
        )}
      </div>
      <div style={{ display: 'flex', justifyContent: 'center', gap: 16, marginBottom: 32 }}>
        {socials.map((s) =>
        <a key={s.label} href="#" style={{
          width: 48, height: 48, borderRadius: '50%',
          background: 'rgba(57,62,70,0.8)', display: 'flex',
          alignItems: 'center', justifyContent: 'center',
          transition: 'all 0.3s'
        }}
        onMouseEnter={(e) => {e.currentTarget.style.background = primary;e.currentTarget.style.transform = 'translateY(-3px)';}}
        onMouseLeave={(e) => {e.currentTarget.style.background = 'rgba(57,62,70,0.8)';e.currentTarget.style.transform = 'translateY(0)';}}>
          
            <svg width="20" height="20" viewBox="0 0 24 24" fill="rgba(238,238,238,0.75)">
              <path d={s.icon} />
            </svg>
          </a>
        )}
      </div>
      <p style={{ color: 'rgba(238,238,238,0.4)', fontSize: 14, fontFamily: 'Poppins, sans-serif' }}>© 2026 Phan Phuoc Thinh. All rights reserved.

      </p>
    </footer>);

}

/* ─── Scroll Reveal ─── */
function Reveal({ children, delay = 0 }) {
  const ref = React.useRef(null);
  const [visible, setVisible] = React.useState(false);

  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) {setVisible(true);obs.disconnect();}
    }, { threshold: 0.15 });
    obs.observe(el);
    return () => obs.disconnect();
  }, []);

  return (
    <div ref={ref} style={{
      opacity: visible ? 1 : 0,
      transform: visible ? 'translateY(0)' : 'translateY(40px)',
      transition: `opacity 0.7s ease ${delay}s, transform 0.7s ease ${delay}s`
    }}>
      {children}
    </div>);

}

Object.assign(window, {
  DoodleBrackets, DoodleArrow, DoodleCircle, DoodleCode, DoodleChart, DoodleStar,
  Nav, ProjectCard, SkillBadge, Footer, Reveal
});