// Page sections: Hero, About, Work, Experience, Publications, TechStack, Contact, Nav

function Hero({ palette, heroCopy }) {
  const p = palette;
  const isMobile = useIsMobile();
  const windowWidth = useWindowWidth();
  const orbitSize = Math.min(windowWidth * 0.88, 520);

  return (
    <section id="hero" style={{
      position: 'relative',
      minHeight: '100vh',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      padding: isMobile ? '100px 16px 100px' : '80px 24px 120px',
      textAlign: 'center',
    }}>
      {/* decorative planets — hidden on mobile to prevent overlap */}
      {!isMobile && (
        <>
          <Planet size={90} color1={p.pop} color2="#fff4e8" rotation={15}
                  style={{ position: 'absolute', top: '15%', left: '8%', opacity: 0.9,
                           animation: 'float 6s ease-in-out infinite' }} />
          <Planet size={60} color1={p.accent} color2={p.pop} rotation={-10} ring={false}
                  style={{ position: 'absolute', top: '22%', right: '12%',
                           animation: 'float 7s ease-in-out 1s infinite' }} />
          <Moon size={50}
                style={{ position: 'absolute', top: '60%', left: '14%',
                         animation: 'float 8s ease-in-out 2s infinite' }} />
          <Constellation
            points={[[20, 40], [55, 30], [80, 60], [110, 45], [140, 80]]}
            color={p.accent}
            style={{ top: '8%', right: '5%', width: 180, height: 120 }}
          />
          <Constellation
            points={[[30, 30], [60, 70], [90, 50], [130, 90]]}
            color={p.star}
            style={{ bottom: '15%', right: '8%', width: 150, height: 110 }}
          />
        </>
      )}

      <div style={{ position: 'relative', zIndex: 2, maxWidth: 900, margin: '0 auto', width: '100%' }}>
        <div className="hand" style={{
          fontSize: isMobile ? 24 : 32,
          color: p.accent,
          marginBottom: 8,
          transform: 'rotate(-3deg)',
          display: 'inline-block',
        }}>
          ✦ welcome, traveler ✦
        </div>

        <div style={{ position: 'relative', padding: isMobile ? '24px 0' : '40px 0', marginBottom: 16 }}>
          <OrbitWreath palette={p} size={orbitSize} />

          {!isMobile && (
            <>
              <Sparkle size={36} color={p.accent}
                       style={{ position: 'absolute', top: 0, left: '15%',
                                animation: 'twinkle 2.5s ease-in-out infinite' }} />
              <Sparkle size={28} color={p.accent}
                       style={{ position: 'absolute', top: '60%', right: '10%',
                                animation: 'twinkle 3s ease-in-out 0.5s infinite' }} />
              <Sparkle size={20} color="#fff4e8"
                       style={{ position: 'absolute', bottom: 10, left: '25%',
                                animation: 'twinkle 2s ease-in-out 1s infinite' }} />
              <Sparkle size={24} color={p.pop}
                       style={{ position: 'absolute', top: '10%', right: '20%',
                                animation: 'twinkle 2.8s ease-in-out 1.5s infinite' }} />
            </>
          )}

          <h1 className="display" style={{
            fontSize: isMobile ? 'clamp(52px, 18vw, 90px)' : 'clamp(72px, 14vw, 180px)',
            margin: 0,
            color: '#fff4e8',
            textShadow: `0 6px 0 ${p.pop}, 0 12px 40px rgba(26, 16, 48, 0.5)`,
            letterSpacing: '-0.04em',
            position: 'relative',
            zIndex: 2,
          }}>
            mishanil
          </h1>
        </div>

        <div className="display" style={{
          fontSize: isMobile ? 'clamp(12px, 3.5vw, 16px)' : 'clamp(14px, 1.4vw, 20px)',
          color: p.accent,
          letterSpacing: isMobile ? '0.12em' : '0.22em',
          textTransform: 'uppercase',
          marginBottom: 24,
          fontWeight: 700,
          opacity: 0.85,
        }}>
          student · researcher · computer science
        </div>

        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap', marginTop: 8 }}>
          <Pill variant="chrome" href="#work">see my work ✨</Pill>
          <Pill variant="ghost" href="#contact">say hi →</Pill>
        </div>
      </div>

      <div style={{
        position: 'absolute', bottom: 32, left: '50%', transform: 'translateX(-50%)',
        color: '#fff4e8', opacity: 0.7, fontSize: 13,
        display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8,
        fontFamily: "'Manrope', sans-serif",
        letterSpacing: '0.2em',
        textTransform: 'uppercase',
      }}>
        <span>scroll</span>
        <svg width="2" height="40" style={{ animation: 'scrollHint 2s ease-in-out infinite' }}>
          <line x1="1" y1="0" x2="1" y2="40" stroke={p.accent} strokeWidth="2" strokeLinecap="round" />
        </svg>
      </div>

      <style>{`
        @keyframes float {
          0%, 100% { transform: translateY(0) rotate(0); }
          50% { transform: translateY(-16px) rotate(5deg); }
        }
        @keyframes scrollHint {
          0%, 100% { opacity: 0.4; transform: translateY(0); }
          50% { opacity: 1; transform: translateY(6px); }
        }
      `}</style>
    </section>
  );
}

function About({ palette }) {
  const p = palette;
  const isMobile = useIsMobile();

  return (
    <section id="about" style={{
      position: 'relative',
      padding: isMobile ? '80px 16px' : '120px 24px',
      maxWidth: 1100, margin: '0 auto',
    }}>
      <SectionHeader kicker="~ a little about me ~" title="about" palette={p} />

      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'minmax(260px, 360px) 1fr',
        gap: isMobile ? 32 : 48,
        alignItems: 'start',
      }}>
        {/* Polaroid-ish avatar card */}
        <div style={{
          position: 'relative',
          background: '#fff4e8',
          padding: '16px 16px 48px',
          borderRadius: 12,
          transform: isMobile ? 'rotate(0deg)' : 'rotate(-3deg)',
          boxShadow: '0 20px 50px rgba(26, 16, 48, 0.4)',
          maxWidth: isMobile ? 280 : 'none',
          margin: isMobile ? '0 auto' : 0,
        }}>
          <div style={{
            aspectRatio: '1 / 1',
            background: 'radial-gradient(circle at 30% 30%, #1a1040 0%, #0a0420 70%, #050215 100%)',
            borderRadius: 6,
            position: 'relative',
            overflow: 'hidden',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <svg viewBox="0 0 200 200" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
              <circle cx="150" cy="60" r="36" fill="#6b4d9e" opacity="0.2"
                      style={{ filter: 'blur(14px)' }} />
              <circle cx="50" cy="140" r="32" fill="#f096c2" opacity="0.14"
                      style={{ filter: 'blur(12px)' }} />
              <circle cx="30" cy="40" r="22" fill="#3d2d66" opacity="0.35"
                      style={{ filter: 'blur(10px)' }} />
            </svg>

            <svg viewBox="0 0 200 200" style={{ width: '90%', height: '90%', position: 'relative', zIndex: 2 }}>
              <defs>
                <radialGradient id="sunGlow" cx="50%" cy="50%" r="55%">
                  <stop offset="0%" stopColor="#fff4e8" stopOpacity="0.8" />
                  <stop offset="40%" stopColor="#ffd98a" stopOpacity="0.4" />
                  <stop offset="100%" stopColor="#ffd98a" stopOpacity="0" />
                </radialGradient>
                <radialGradient id="sunBody" cx="38%" cy="35%" r="65%">
                  <stop offset="0%" stopColor="#fff7c9" />
                  <stop offset="50%" stopColor="#ffd98a" />
                  <stop offset="100%" stopColor="#ffb088" />
                </radialGradient>
              </defs>

              <circle cx="100" cy="100" r="90" fill="url(#sunGlow)">
                <animate attributeName="r" values="88;94;88" dur="4s" repeatCount="indefinite" />
              </circle>

              <g>
                {Array.from({length: 12}).map((_, i) => {
                  const a = (i * 30) * Math.PI / 180;
                  const r1 = 70, r2 = 82;
                  const x1 = 100 + Math.cos(a) * r1;
                  const y1 = 100 + Math.sin(a) * r1;
                  const x2 = 100 + Math.cos(a) * r2;
                  const y2 = 100 + Math.sin(a) * r2;
                  return (
                    <line key={i} x1={x1} y1={y1} x2={x2} y2={y2}
                      stroke="#ffd98a" strokeWidth="3" strokeLinecap="round" opacity="0.9" />
                  );
                })}
              </g>

              <circle cx="100" cy="100" r="58" fill="url(#sunBody)" />

              <path d="M 82 92 Q 88 85, 94 92" fill="none" stroke="#2a1f4a" strokeWidth="3.5" strokeLinecap="round" />
              <path d="M 106 92 Q 112 85, 118 92" fill="none" stroke="#2a1f4a" strokeWidth="3.5" strokeLinecap="round" />
              <ellipse cx="82" cy="108" rx="7" ry="3.5" fill="#f096c2" opacity="0.7" />
              <ellipse cx="118" cy="108" rx="7" ry="3.5" fill="#f096c2" opacity="0.7" />
              <path d="M 88 114 Q 100 124, 112 114" fill="none" stroke="#2a1f4a" strokeWidth="3.5" strokeLinecap="round" />
            </svg>
          </div>
          <div className="hand" style={{
            textAlign: 'center', marginTop: 14, fontSize: 22, color: '#2a1f4a',
          }}>
            ~ mishanil, probably researching ~
          </div>
        </div>

        <div>
          <DoodleCard color="rgba(255, 244, 232, 0.95)" accent={p.pop} style={{ padding: isMobile ? 20 : 32 }}>
            <p style={{ fontSize: isMobile ? 16 : 18, lineHeight: 1.7, color: '#2a1f4a', margin: 0 }}>
              I'm a <strong>first-year Computer Science</strong> student who's really into research and loves picking up random bits of knowledge across whatever catches my interest. Right now I'm working on <span style={{ background: `${p.accent}60`, padding: '0 4px 0 4px', marginRight: -3, borderRadius: 4 }}>machine learning for digital safety tooling</span>, specifically content moderation.
            </p>
            <p style={{ fontSize: isMobile ? 16 : 18, lineHeight: 1.7, color: '#2a1f4a', margin: '16px 0 0' }}>
              When I'm not at a computer, I'm usually doing something creative or working through a good puzzle and I love learning about fields that have nothing to do with my own.
            </p>

            <div style={{ marginTop: 20, display: 'flex', flexWrap: 'wrap', gap: 8 }}>
              <Chip color={p.pop}>machine learning</Chip>
              <Chip color={p.accent}>content moderation</Chip>
              <Chip color="#d9c7f5">research</Chip>
              <Chip color="#c7f5dc">puzzles</Chip>
              <Chip color="#f096c2">curiosity</Chip>
            </div>
          </DoodleCard>

          <div style={{
            marginTop: 16,
            display: 'grid',
            gridTemplateColumns: isMobile ? 'repeat(3, 1fr)' : 'repeat(3, 1fr)',
            gap: 10,
          }}>
            {[
              { icon: '✦', label: 'currently', value: 'year one, CS' },
              { icon: '✧', label: 'researching', value: 'ML + safety' },
              { icon: '✦', label: 'collecting', value: 'new obsessions' },
            ].map((f, i) => (
              <div key={i} style={{
                background: 'rgba(255, 244, 232, 0.1)',
                border: '1.5px solid rgba(255, 244, 232, 0.3)',
                borderRadius: 14,
                padding: isMobile ? '12px 10px' : 16,
                color: '#fff4e8',
                backdropFilter: 'blur(8px)',
              }}>
                <div style={{ color: p.accent, fontSize: 18 }}>{f.icon}</div>
                <div style={{ fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.12em', opacity: 0.7, marginTop: 5 }}>
                  {f.label}
                </div>
                <div className="display" style={{ fontSize: isMobile ? 14 : 18, marginTop: 4, lineHeight: 1.2 }}>
                  {f.value}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

function ProjectCard({ project, palette, index }) {
  const p = palette;
  const [hovered, setHovered] = React.useState(false);
  const rotation = index % 2 === 0 ? -1.5 : 1.5;

  return (
    <div
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
      style={{
        position: 'relative',
        background: '#fff4e8',
        borderRadius: 24,
        padding: 0,
        overflow: 'hidden',
        boxShadow: hovered
          ? '0 24px 60px rgba(26, 16, 48, 0.5)'
          : '0 12px 32px rgba(26, 16, 48, 0.3)',
        transform: `rotate(${hovered ? 0 : rotation}deg) translateY(${hovered ? -8 : 0}px)`,
        transition: 'transform 0.3s cubic-bezier(.2,.8,.2,1), box-shadow 0.3s',
        cursor: 'pointer',
      }}
    >
      {project.art && (
        <div style={{
          aspectRatio: '16 / 10',
          background: project.thumb,
          position: 'relative',
          overflow: 'hidden',
        }}>
          {project.art}
          <Sparkle size={18} color="#ffe38a"
                   style={{ position: 'absolute', top: 12, right: 12,
                            animation: 'twinkle 2.5s ease-in-out infinite' }} />
        </div>
      )}

      <div style={{ padding: '20px 20px 24px' }}>
        <div style={{
          display: 'flex', alignItems: 'baseline', justifyContent: 'space-between',
          marginBottom: 6,
        }}>
          <div className="hand" style={{ fontSize: 18, color: '#6b4d9e', fontWeight: 600 }}>
            {project.kicker}
          </div>
          <div style={{
            fontSize: 11, color: '#8a7bb0', letterSpacing: '0.15em',
            textTransform: 'uppercase',
          }}>
            {project.year}
          </div>
        </div>
        <h3 className="display" style={{
          fontSize: 26, margin: '0 0 10px', color: '#2a1f4a', letterSpacing: '-0.02em',
        }}>
          {project.title}
        </h3>
        <p style={{
          fontSize: 14, color: '#5b4a82', margin: 0, lineHeight: 1.6,
        }}>
          {project.desc}
        </p>
        <div style={{ marginTop: 14, display: 'flex', flexWrap: 'wrap', gap: 6 }}>
          {project.tags.map((t, i) => (
            <span key={i} style={{
              fontSize: 11, padding: '4px 10px', borderRadius: 999,
              background: i % 2 ? `${p.pop}25` : `${p.accent}30`,
              color: '#2a1f4a', fontWeight: 600,
            }}>
              {t}
            </span>
          ))}
        </div>

        {project.href && (
          <a
            href={project.href}
            target="_blank"
            rel="noopener noreferrer"
            onClick={(e) => e.stopPropagation()}
            style={{
              display: 'inline-flex', alignItems: 'center', gap: 6,
              marginTop: 16,
              padding: '8px 14px',
              background: '#3d2d66',
              color: '#fff4e8',
              textDecoration: 'none',
              borderRadius: 999,
              fontSize: 13, fontWeight: 700,
              letterSpacing: '0.02em',
              transition: 'background 0.2s, transform 0.2s',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.background = '#2a1f4a';
              e.currentTarget.style.transform = 'translateY(-1px)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.background = '#3d2d66';
              e.currentTarget.style.transform = 'translateY(0)';
            }}
          >
            {project.linkLabel || 'see more'}
            <span aria-hidden="true">→</span>
          </a>
        )}
      </div>
    </div>
  );
}

function Work({ palette }) {
  const p = palette;
  const isMobile = useIsMobile();
  const projects = [
    {
      title: 'Water Watch',
      kicker: '~ flood safety tool ~',
      year: '2026',
      desc: 'A flood response app with two sides to it. The public side pulls live flood alerts from the UK Environment Agency, layers in crowdsourced hazard reports, and routes you around active risk areas in real time. Emergency services get a separate view where they can draw risk zones and drop shelter markers directly onto the map.',
      tags: ['TypeScript', 'React', 'Mapbox GL', 'FastAPI', 'Turf.js', 'Python', 'Vite', 'SQLite'],
      href: 'https://github.com/mishanilkazreen/water-watch',
      linkLabel: 'view on GitHub',
      thumb: `linear-gradient(135deg, ${p.cloud2 || '#c7f5dc'}, ${p.pop})`,
      art: null,
    },
    {
      title: 'Portsmouth Water — Excellence in Water',
      kicker: '~ award winner ~',
      year: '2024',
      desc: 'A team project where we researched the legal and regulatory landscape around residential smart metering, collected data, and built an app to surface real-time household water usage. Making consumption visible enough that people actually change behaviour. We received the Excellence in Water award from Portsmouth Water.',
      tags: ['Award', 'Smart Meters', 'Research', 'Data Collection', 'Team'],
      href: 'https://www.portsmouthwater.co.uk/',
      linkLabel: 'visit portsmouthwater.co.uk',
      thumb: `linear-gradient(135deg, #7bb3db, ${p.cloud2 || '#c7f5dc'})`,
      art: null,
    },
  ];

  return (
    <section id="work" style={{
      position: 'relative',
      padding: isMobile ? '80px 16px' : '120px 24px',
      maxWidth: 1200, margin: '0 auto',
    }}>
      <SectionHeader kicker="~ things i've made ~" title="selected work" palette={p} />

      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr' : 'repeat(auto-fit, minmax(320px, 1fr))',
        gap: 28,
      }}>
        {projects.map((proj, i) => (
          <ProjectCard key={i} project={proj} palette={p} index={i} />
        ))}
      </div>
    </section>
  );
}

function Experience({ palette }) {
  const p = palette;
  const isMobile = useIsMobile();
  const items = [
    {
      when: 'Aug 2025 — now',
      what: 'ML Research · Personal',
      where: 'in collaboration with Dr. Mani Ghahremani',
      desc: 'In my spare time I collaborate with Dr. Mani Ghahremani on machine learning research, with active work toward both publication and funding. The focus spans explainable AI (XAI) and computer vision, alongside building content moderation tooling that gives social platforms practical, AI-driven solutions for keeping their communities safe.',
    },
    {
      when: 'Jan 2026 — now',
      what: 'Online Video Game Creator',
      where: 'V.L.A.D. Outreach · Southampton · Volunteering',
      desc: 'Designing therapeutic gameplay systems in Roblox aimed at creating safe, supportive spaces for vulnerable users. Building moderation and safeguarding features to catch malicious actors early, and iterating mechanics in close collaboration with mental health professionals based on real well-being outcomes.',
    },
    {
      when: 'Aug 2024 — May 2025',
      what: 'Company Director',
      where: 'Dockly · London',
      desc: 'Drove a 1,000% improvement in game metrics across client titles collectively reaching over 10 million visits. Oversaw client production teams with a focus on performance and accessibility, and designed in-game economic systems using data-driven algorithms to keep monetisation stable and fair.',
    },
  ];

  return (
    <section id="experience" style={{
      position: 'relative',
      padding: isMobile ? '80px 16px' : '120px 24px',
      maxWidth: 900, margin: '0 auto',
    }}>
      <SectionHeader kicker="~ a tiny timeline ~" title="experience" palette={p} />

      <div style={{ position: 'relative', paddingLeft: 40, marginLeft: isMobile ? 0 : -40 }}>
        <svg
          style={{ position: 'absolute', left: 12, top: 8, bottom: 8, width: 2 }}
          preserveAspectRatio="none"
          viewBox="0 0 2 100"
        >
          <line x1="1" y1="0" x2="1" y2="100" stroke={p.accent} strokeWidth="2" strokeDasharray="3 4" />
        </svg>

        {items.map((it, i) => (
          <div key={i} style={{ position: 'relative', marginBottom: 28 }}>
            <div style={{
              position: 'absolute', left: -34, top: 8,
              width: 20, height: 20, borderRadius: '50%',
              background: p.accent,
              boxShadow: `0 0 0 4px ${p.pop}80, 0 0 16px ${p.accent}`,
            }}>
              <Sparkle size={26} color="#fff4e8"
                       style={{ position: 'absolute', top: -3, left: -3 }} />
            </div>

            <DoodleCard color="rgba(255, 244, 232, 0.95)" accent={p.pop} style={{ marginBottom: 0, padding: isMobile ? 18 : 32 }}>
              <div style={{
                display: 'inline-block',
                fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase',
                color: '#fff4e8', fontWeight: 700, marginBottom: 10,
                background: '#3d2d66',
                padding: '4px 10px',
                borderRadius: 999,
              }}>
                {it.when}
              </div>
              <h3 className="display" style={{
                fontSize: isMobile ? 20 : 24, margin: '0 0 4px', color: '#2a1f4a',
              }}>
                {it.what}
              </h3>
              <div style={{ fontSize: 14, color: '#8a7bb0', marginBottom: 10, fontStyle: 'italic' }}>
                {it.where}
              </div>
              <p style={{ fontSize: 14, color: '#5b4a82', margin: 0, lineHeight: 1.6 }}>
                {it.desc}
              </p>
            </DoodleCard>
          </div>
        ))}
      </div>
    </section>
  );
}

function TechStack({ palette }) {
  const p = palette;
  const isMobile = useIsMobile();
  const stacks = [
    { name: 'Python', color: '#ffd966', key: 'python' },
    { name: 'C++', color: '#a4c8f0', key: 'cplusplus' },
    { name: 'TypeScript', color: '#82b5ff', key: 'typescript' },
    { name: 'Dart', color: '#7dd3c0', key: 'dart' },
    { name: 'Lua', color: '#b28bff', key: 'lua' },
    { name: 'SQL', color: '#f5b4d0', key: 'sql' },
    { name: 'PyTorch', color: '#ff9e7a', key: 'pytorch' },
    { name: 'NumPy', color: '#a9c8ff', key: 'numpy' },
    { name: 'Git', color: '#ffb088', key: 'git' },
  ];

  return (
    <section id="stack" style={{
      position: 'relative',
      padding: isMobile ? '80px 16px' : '120px 24px',
      maxWidth: 1100, margin: '0 auto',
    }}>
      <SectionHeader kicker="~ tools in the toolbox ~" title="tech stack" palette={p} />

      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? 'repeat(2, 1fr)' : 'repeat(auto-fit, minmax(160px, 1fr))',
        gap: 12,
      }}>
        {stacks.map((s, i) => (
          <div key={i} style={{
            position: 'relative',
            background: 'rgba(255, 244, 232, 0.1)',
            border: '1.5px solid rgba(255, 244, 232, 0.25)',
            borderRadius: 16,
            padding: isMobile ? '14px 12px' : '20px 16px',
            display: 'flex', alignItems: 'center', gap: 10,
            backdropFilter: 'blur(10px)',
            transition: 'transform 0.2s, border-color 0.2s, background 0.2s',
            cursor: 'default',
          }}
            onMouseEnter={(e) => {
              e.currentTarget.style.transform = 'translateY(-4px) rotate(-1deg)';
              e.currentTarget.style.borderColor = s.color;
              e.currentTarget.style.background = 'rgba(255, 244, 232, 0.16)';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.transform = 'translateY(0) rotate(0)';
              e.currentTarget.style.borderColor = 'rgba(255, 244, 232, 0.25)';
              e.currentTarget.style.background = 'rgba(255, 244, 232, 0.1)';
            }}
          >
            <div style={{
              width: isMobile ? 36 : 44, height: isMobile ? 36 : 44, borderRadius: 10,
              background: `${s.color}22`,
              border: `1.5px solid ${s.color}66`,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              flexShrink: 0,
            }}>
              <Icon name={s.key} size={isMobile ? 18 : 22} color={s.color} />
            </div>
            <div className="display" style={{
              color: '#fff4e8', fontSize: isMobile ? 14 : 17,
              minWidth: 0, flex: 1,
              overflowWrap: 'anywhere',
              wordBreak: 'break-word',
              lineHeight: 1.2,
            }}>
              {s.name}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function Publications({ palette }) {
  const p = palette;
  const isMobile = useIsMobile();
  const pubs = [
    {
      status: 'under review',
      title: 'Machine Learning-Based Loan Approval Automation: Enhancing Efficiency, Accuracy, and Fairness in Credit Decision-Making',
      authors: 'Mani Ghahremani, Hellen Amimo Otieno, Mishanil Kazreen, Stavros Shiaeles',
      venue: 'Expert Systems (review submitted)',
      year: '2026',
      doi: 'TBC',
      abstract: 'Traditional loan approval processes are manual, time-consuming, and susceptible to human bias. This research develops a machine learning-based system to automate loan eligibility assessment while enhancing efficiency, accuracy, and fairness in credit decision-making. We developed and compared multiple supervised ML models — including Random Forest, XGBoost, stacking, and voting ensembles — on a publicly available loan dataset (614 instances, 13 features). To address class imbalance (68.7% approved, 31.3% rejected), we applied the Synthetic Minority Over-sampling Technique (SMOTE). Hyperparameter tuning was performed using GridSearchCV with 5-fold cross-validation, optimising for F1-score. Model performance was evaluated using accuracy, precision, recall, F1-score, and Area Under the Curve (AUC). Local Interpretable Model-Agnostic Explanations (LIME) were applied to ensure transparency. A tuned Random Forest classifier achieved the best performance with an accuracy of 85.96%, F1-score of 87.17%, and recall of 95.32%, outperforming XGBoost and ensemble methods. The high recall ensures effective identification of loan approvals and minimises false negatives. LIME provided instance-level interpretability, enabling stakeholders to understand prediction rationale. This study demonstrates that a systematic framework combining rigorous hyperparameter tuning, class imbalance handling, and explainable AI can create accurate, transparent, and equitable loan approval systems, providing a practical blueprint for responsible AI deployment in credit decision-making.',
    },
  ];
  const [expanded, setExpanded] = React.useState({});

  return (
    <section id="publications" style={{
      position: 'relative',
      padding: isMobile ? '80px 16px' : '120px 24px',
      maxWidth: 900, margin: '0 auto',
    }}>
      <SectionHeader kicker="~ research & writing ~" title="publications" palette={p} />

      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
        {pubs.map((pub, i) => (
          <DoodleCard key={i} color="rgba(255, 244, 232, 0.95)" accent={p.pop} style={{ padding: isMobile ? 18 : 32 }}>
            <div style={{
              display: 'inline-flex', alignItems: 'center', gap: 8,
              fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase',
              color: '#fff4e8', fontWeight: 700, marginBottom: 14,
              background: '#3d2d66',
              padding: '5px 12px',
              borderRadius: 999,
            }}>
              <span style={{
                width: 8, height: 8, borderRadius: '50%',
                background: '#ffe38a',
                boxShadow: '0 0 8px #ffe38a',
                animation: 'twinkle 2s ease-in-out infinite',
              }} />
              {pub.status}
            </div>
            <h3 className="display" style={{
              fontSize: isMobile ? 18 : 24, margin: '0 0 10px', color: '#2a1f4a', lineHeight: 1.25,
            }}>
              {pub.title}
            </h3>
            <div style={{ fontSize: 13, color: '#5b4a82', marginBottom: 4 }}>
              {pub.authors}
            </div>
            <div style={{
              fontSize: 13, color: '#8a7bb0', marginBottom: 14,
              fontStyle: 'italic',
            }}>
              {pub.venue} · {pub.year}
            </div>

            {pub.doi && (
              <div style={{
                display: 'inline-flex', alignItems: 'center', gap: 8,
                padding: '4px 10px 4px 4px',
                background: 'rgba(61, 45, 102, 0.06)',
                border: '1px solid rgba(61, 45, 102, 0.15)',
                borderRadius: 6,
                marginBottom: 18,
                fontSize: 12,
              }}>
                <span style={{
                  background: '#3d2d66', color: '#fff4e8',
                  padding: '2px 7px', borderRadius: 4,
                  fontSize: 10, fontWeight: 700, letterSpacing: '0.12em',
                }}>DOI</span>
                <span style={{
                  fontFamily: "'Manrope', ui-monospace, monospace",
                  color: '#3d2d66', fontWeight: 600,
                  letterSpacing: '0.03em',
                }}>{pub.doi}</span>
              </div>
            )}

            <div style={{
              fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase',
              color: '#5b4a82', fontWeight: 700, marginBottom: 8,
            }}>Abstract</div>

            <p style={{
              fontSize: 14, color: '#2a1f4a', margin: 0, lineHeight: 1.65,
              maxHeight: expanded[i] ? 'none' : 100,
              overflow: 'hidden',
              position: 'relative',
              transition: 'max-height 0.3s',
              WebkitMaskImage: expanded[i]
                ? 'none'
                : 'linear-gradient(to bottom, #000 60%, transparent 100%)',
              maskImage: expanded[i]
                ? 'none'
                : 'linear-gradient(to bottom, #000 60%, transparent 100%)',
            }}>
              {pub.abstract}
            </p>

            <button
              onClick={() => setExpanded((prev) => ({ ...prev, [i]: !prev[i] }))}
              style={{
                marginTop: 14,
                background: '#3d2d66',
                border: 'none',
                color: '#fff4e8',
                fontFamily: 'inherit',
                fontSize: 13, fontWeight: 700,
                letterSpacing: '0.04em',
                cursor: 'pointer',
                padding: '8px 14px',
                borderRadius: 999,
                display: 'inline-flex', alignItems: 'center', gap: 6,
                transition: 'transform 0.15s, background 0.15s',
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.transform = 'translateY(-1px)';
                e.currentTarget.style.background = '#2a1f4a';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.transform = 'translateY(0)';
                e.currentTarget.style.background = '#3d2d66';
              }}
            >
              {expanded[i] ? 'read less ↑' : 'read full abstract ↓'}
            </button>
          </DoodleCard>
        ))}

        <a
          href="https://orcid.org/0009-0008-3484-9498"
          target="_blank"
          rel="noopener noreferrer"
          style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            alignSelf: 'center',
            padding: '12px 20px',
            background: 'rgba(255, 244, 232, 0.1)',
            border: '1.5px solid rgba(255, 244, 232, 0.3)',
            borderRadius: 999,
            color: '#fff4e8', textDecoration: 'none',
            backdropFilter: 'blur(10px)',
            fontSize: 14,
            transition: 'transform 0.2s, border-color 0.2s',
          }}
          onMouseEnter={(e) => {
            e.currentTarget.style.transform = 'translateY(-2px)';
            e.currentTarget.style.borderColor = p.accent;
          }}
          onMouseLeave={(e) => {
            e.currentTarget.style.transform = 'translateY(0)';
            e.currentTarget.style.borderColor = 'rgba(255, 244, 232, 0.3)';
          }}
        >
          <span style={{ color: p.accent }}>✧</span>
          view full ORCID profile →
        </a>
      </div>
    </section>
  );
}

function Contact({ palette }) {
  const p = palette;
  const isMobile = useIsMobile();
  const links = [
    { label: 'email', value: 'mishanilkazreen@gmail.com', href: 'mailto:mishanilkazreen@gmail.com', key: 'email' },
    { label: 'github', value: '@mishanilkazreen', href: 'https://github.com/mishanilkazreen', key: 'github' },
    { label: 'linkedin', value: 'in/mishanil', href: 'https://www.linkedin.com/in/mishanil/', key: 'linkedin' },
    { label: 'orcid', value: '0009-0008-3484-9498', href: 'https://orcid.org/0009-0008-3484-9498', key: 'orcid' },
  ];

  return (
    <section id="contact" style={{
      position: 'relative',
      padding: isMobile ? '80px 16px 60px' : '120px 24px 80px',
      maxWidth: 900, margin: '0 auto',
      textAlign: 'center',
    }}>
      <SectionHeader kicker="~ let's talk ~" title="say hi" palette={p} />

      <p style={{
        color: '#fff4e8', fontSize: isMobile ? 16 : 18, maxWidth: 520, margin: '0 auto 32px',
        opacity: 0.9,
      }}>
        if you're working on something interesting, especially something research-y or puzzle-shaped, i'd love to hear about it.
      </p>

      <div style={{
        display: 'grid',
        gridTemplateColumns: isMobile ? '1fr 1fr' : 'repeat(auto-fit, minmax(220px, 1fr))',
        gap: 12,
        marginBottom: 40,
      }}>
        {links.map((l, i) => (
          <a
            key={i}
            href={l.href}
            target={l.href.startsWith('http') ? '_blank' : undefined}
            rel="noopener noreferrer"
            style={{
              display: 'block',
              background: 'rgba(255, 244, 232, 0.1)',
              border: '1.5px solid rgba(255, 244, 232, 0.25)',
              borderRadius: 18,
              padding: isMobile ? '16px 14px' : '20px 18px',
              textDecoration: 'none',
              color: '#fff4e8',
              backdropFilter: 'blur(10px)',
              transition: 'transform 0.2s, background 0.2s, border-color 0.2s',
              textAlign: 'left',
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.transform = 'translateY(-4px)';
              e.currentTarget.style.background = 'rgba(255, 244, 232, 0.18)';
              e.currentTarget.style.borderColor = p.accent;
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.transform = 'translateY(0)';
              e.currentTarget.style.background = 'rgba(255, 244, 232, 0.1)';
              e.currentTarget.style.borderColor = 'rgba(255, 244, 232, 0.25)';
            }}
          >
            <div style={{
              width: 32, height: 32, marginBottom: 8,
              background: 'rgba(255, 244, 232, 0.15)',
              border: `1.5px solid ${p.accent}80`,
              borderRadius: 8,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
            }}>
              <Icon name={l.key} size={16} color={p.accent} />
            </div>
            <div style={{
              fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase',
              opacity: 0.7, marginBottom: 2,
            }}>
              {l.label}
            </div>
            <div className="display" style={{
              fontSize: isMobile ? 13 : 17,
              wordBreak: 'break-all',
              lineHeight: 1.3,
            }}>
              {l.value}
            </div>
          </a>
        ))}
      </div>

      <div style={{
        fontSize: 13, color: '#fff4e8', opacity: 0.6,
        letterSpacing: '0.1em',
      }}>
        ✦ made with curiosity, late at night ✦
      </div>

      <div style={{
        marginTop: 28,
        paddingTop: 20,
        borderTop: '1px solid rgba(255, 244, 232, 0.15)',
        fontSize: 12,
        color: 'rgba(255, 244, 232, 0.55)',
        letterSpacing: '0.08em',
      }}>
        © {new Date().getFullYear()} Mishanil Kazreen · all rights reserved
      </div>
    </section>
  );
}

function Nav({ palette }) {
  const p = palette;
  const isMobile = useIsMobile(600);
  const [scrolled, setScrolled] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // On mobile show a compact set of links
  const items = isMobile
    ? [
        { label: 'about', href: '#about' },
        { label: 'work', href: '#work' },
        { label: 'contact', href: '#contact' },
      ]
    : [
        { label: 'about', href: '#about' },
        { label: 'publications', href: '#publications' },
        { label: 'experience', href: '#experience' },
        { label: 'contact', href: '#contact' },
      ];

  return (
    <nav style={{
      position: 'fixed', top: 12, left: '50%', transform: 'translateX(-50%)',
      zIndex: 50,
      background: scrolled ? 'rgba(26, 16, 48, 0.7)' : 'rgba(255, 244, 232, 0.1)',
      border: `1.5px solid ${scrolled ? p.accent + '80' : 'rgba(255, 244, 232, 0.25)'}`,
      backdropFilter: 'blur(12px)',
      borderRadius: 999,
      padding: isMobile ? '6px 8px 6px 6px' : '8px 10px 8px 8px',
      display: 'flex', alignItems: 'center', gap: 1,
      transition: 'background 0.3s, border-color 0.3s',
      maxWidth: 'calc(100vw - 24px)',
    }}>
      <a
        href="#hero"
        className="display"
        onClick={(e) => {
          e.preventDefault();
          window.scrollTo({ top: 0, behavior: 'smooth' });
        }}
        style={{
          color: '#2a1f4a',
          textDecoration: 'none',
          padding: isMobile ? '6px 12px' : '8px 16px',
          fontSize: isMobile ? 14 : 16,
          display: 'flex', alignItems: 'center', gap: 5,
          background: p.accent,
          borderRadius: 999,
          fontWeight: 700,
          boxShadow: `0 2px 0 ${p.accent}60`,
          transition: 'transform 0.2s, box-shadow 0.2s',
          flexShrink: 0,
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.transform = 'translateY(-1px)';
          e.currentTarget.style.boxShadow = `0 4px 0 ${p.accent}80`;
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.transform = 'translateY(0)';
          e.currentTarget.style.boxShadow = `0 2px 0 ${p.accent}60`;
        }}
      >
        <Sparkle size={12} color="#2a1f4a" />
        <span>me</span>
      </a>
      {items.map((it) => (
        <a key={it.label} href={it.href} style={{
          color: '#fff4e8', textDecoration: 'none',
          padding: isMobile ? '6px 10px' : '8px 14px',
          fontSize: isMobile ? 12 : 14,
          fontFamily: "'Manrope', sans-serif",
          fontWeight: 500,
          borderRadius: 999,
          transition: 'background 0.2s',
          whiteSpace: 'nowrap',
        }}
           onMouseEnter={(e) => e.currentTarget.style.background = `${p.accent}30`}
           onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
        >
          {it.label}
        </a>
      ))}
    </nav>
  );
}

Object.assign(window, { Hero, About, TechStack, Work, Experience, Publications, Contact, Nav });