const { useState, useEffect, useRef, useCallback } = React;

// ─── Hooks ───

function useScrollReveal(threshold = 0.12) {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const obs = new IntersectionObserver(
      ([e]) => { if (e.isIntersecting) { setVisible(true); obs.disconnect(); } },
      { threshold, rootMargin: '0px 0px -30px 0px' }
    );
    obs.observe(el);
    return () => obs.disconnect();
  }, []);
  return [ref, visible];
}

function useCounter(end, duration = 1800, trigger = false) {
  const [count, setCount] = useState(0);
  useEffect(() => {
    if (!trigger) return;
    let start = null;
    const step = (ts) => {
      if (!start) start = ts;
      const p = Math.min((ts - start) / duration, 1);
      const eased = 1 - Math.pow(1 - p, 3);
      setCount(Math.floor(eased * end));
      if (p < 1) requestAnimationFrame(step);
    };
    requestAnimationFrame(step);
  }, [trigger, end, duration]);
  return count;
}

function useScrolled() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const h = () => setScrolled(window.scrollY > 50);
    window.addEventListener('scroll', h, { passive: true });
    h();
    return () => window.removeEventListener('scroll', h);
  }, []);
  return scrolled;
}

// ─── Icons ───

const IconGitHub = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
    <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
  </svg>
);

const IconLinkedIn = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
    <path d="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"/>
  </svg>
);

const IconExternal = () => (
  <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line>
  </svg>
);

const IconMail = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 01-2.06 0L2 7"></path>
  </svg>
);

const IconArrowDown = () => (
  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M12 5v14"></path><path d="m19 12-7 7-7-7"></path>
  </svg>
);

const IconMenu = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
    <line x1="4" y1="7" x2="20" y2="7"></line><line x1="4" y1="12" x2="20" y2="12"></line><line x1="4" y1="17" x2="20" y2="17"></line>
  </svg>
);

const IconX = () => (
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
    <line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line>
  </svg>
);

const IconCamera = () => (
  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M14.5 4h-5L7 7H4a2 2 0 00-2 2v9a2 2 0 002 2h16a2 2 0 002-2V9a2 2 0 00-2-2h-3l-2.5-3z"></path><circle cx="12" cy="13" r="3"></circle>
  </svg>
);

const IconDownload = () => (
  <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
    <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line>
  </svg>
);

// ─── Data ───

const NAV_LINKS = [
  { label: 'About', href: '#about' },
  { label: 'Projects', href: '#projects' },
  { label: 'Skills', href: '#skills' },
  { label: 'Research', href: '#research' },
  { label: 'Experience', href: '#experience' },
  { label: 'Contact', href: '#contact' },
];

const STATS = [
  { value: 9, label: 'Projects', suffix: '+' },
  { value: 2, label: 'Internships', suffix: '' },
  { value: 6, label: 'Certifications', suffix: '' },
  { value: 10, label: 'Top National', prefix: 'Top ' },
];

const PROFILE_PHOTO = LINKS.profilePhoto;

const PROJECTS = [
  { name: 'NexoCrat', subtitle: 'Full-Stack SaaS Platform', tag: 'Sem 6 · Ongoing', desc: 'Event management SaaS with bulk certificate generation (1000+/batch), HMAC-SHA256 QR verification, and integrated Stripe + Razorpay payments.', stack: ['React.js','Node.js','PostgreSQL','Prisma','Stripe','AWS S3'], color: '#6366F1', img: LINKS.projectImages.nexocrat, github: LINKS.projectGithub.nexocrat, live: LINKS.projectLive.nexocrat },
  { name: 'SmartPark', subtitle: 'AI & IoT Parking System', tag: 'Sem 6', desc: 'Dual-layer hardware with YOLOv8 vehicle detection, real-time WebSocket updates, and dynamic pricing engine.', stack: ['React.js','Python','YOLOv8','OpenCV','Raspberry Pi'], color: '#10B981', img: LINKS.projectImages.smartpark, github: LINKS.projectGithub.smartpark, live: LINKS.projectLive.smartpark },
  { name: 'NutriCare', subtitle: 'AI Nutrition Planner', tag: 'Sem 5', desc: 'Maternal health nutrition planner with Random Forest ML pipeline for trimester-specific diet plans.', stack: ['MongoDB','Express.js','React.js','scikit-learn'], color: '#8B5CF6', img: LINKS.projectImages.nutricare, github: LINKS.projectGithub.nutricare, live: LINKS.projectLive.nutricare },
  { name: 'PII Sanitization', subtitle: 'AI Privacy System', tag: 'HACKaMINeD 2026', desc: 'Indian-document-focused PII detection with multilingual support, OCR scanning, and real-time sanitization.', stack: ['React.js','Python','SpaCy','Transformers','MongoDB'], color: '#EF4444', img: LINKS.projectImages.pii, github: LINKS.projectGithub.pii, live: LINKS.projectLive.pii },
  { name: 'City Air Watch', subtitle: 'AQI Monitoring Platform', tag: 'Hack4Delhi', desc: 'Ward-level AQI monitoring with AI forecasting and citizen geo-tagged pollution reports for MCD Delhi.', stack: ['React.js','Node.js','PostgreSQL','TensorFlow'], color: '#3B82F6', img: LINKS.projectImages.cityair, github: LINKS.projectGithub.cityair, live: LINKS.projectLive.cityair },
  { name: 'SkillMart', subtitle: 'LMS / EdTech Platform', tag: 'Sem 4', desc: 'Full-featured LMS with courses, video sections, auto-grading, payments, and AI chatbot.', stack: ['React.js','Redux','Node.js','MongoDB','Razorpay'], color: '#F59E0B', img: LINKS.projectImages.skillmart, github: LINKS.projectGithub.skillmart, live: LINKS.projectLive.skillmart },
  { name: 'BananiApp', subtitle: 'Business Tool', tag: 'Personal', desc: "Calculator and management app built for father's banana export business with custom workflows.", stack: ['React.js','Node.js'], color: '#22C55E', img: LINKS.projectImages.bananiapp, github: LINKS.projectGithub.bananiapp, live: LINKS.projectLive.bananiapp },
  { name: 'SSCC', subtitle: 'Smart Cooling Controller', tag: 'Personal', desc: 'Smart home IoT controller with sensor integration for stabilizer cooling management.', stack: ['React.js','Express.js','Arduino','ESP32'], color: '#06B6D4', img: LINKS.projectImages.sscc, github: LINKS.projectGithub.sscc, live: LINKS.projectLive.sscc },
  { name: 'TripKrafter', subtitle: 'Travel Package Maker', tag: 'Sem 3', desc: 'Customized travel package platform with Admin, Customer, and Middlemen modules.', stack: ['HTML','PHP','MySQL'], color: '#EC4899', img: LINKS.projectImages.tripkrafter, github: LINKS.projectGithub.tripkrafter, live: LINKS.projectLive.tripkrafter },
];

const SKILL_GROUPS = [
  { category: 'Languages', items: ['Python','JavaScript','TypeScript','C++','C','Java','SQL','PHP'] },
  { category: 'Frameworks', items: ['React.js','Next.js','Node.js','Express.js','Redux Toolkit','Tailwind CSS','Prisma ORM'] },
  { category: 'AI / ML', items: ['scikit-learn','OpenCV','YOLOv8','SpaCy','Hugging Face','TensorFlow'] },
  { category: 'Databases', items: ['PostgreSQL','MongoDB','MySQL','Firebase'] },
  { category: 'Cloud & Tools', items: ['AWS S3/EC2','Cloudflare','Docker','Git','Vercel','Figma','Raspberry Pi','Arduino'] },
];

const PUBLICATION = {
  title: 'DA-EDSN: Multimodal Teacher Emotion Recognition',
  venue: 'ICCBI 2026 — 5th Intl. Conference on Computer Networks, Big Data & IoT',
  status: 'Accepted',
  metrics: 'ACC 0.816 / WF1 0.815 on IEMOCAP',
  method: 'Four-modality fusion: Audio, Video, Text, MOCAP head motion',
  innovations: 'Four architectural improvements over base EDSN model',
  authors: 'Darshan Kachhiya, Dharmit Fadadu',
};

const ACHIEVEMENTS = [
  { title: 'HackNUthon 6.0', org: 'Nirma University', badge: '9th Place · National', date: 'Mar 2025', desc: 'Top 10 nationally at CSI hackathon' },
  { title: 'Odoo Hackathon 2025', org: 'Gandhinagar', badge: 'Finalist', date: 'Aug 2025', desc: 'Final offline round across Gujarat' },
  { title: 'Hack4Delhi', org: 'IEEE NSUT', badge: 'Only Gujarat Team', date: 'Jan 2025', desc: 'Selected for offline round in New Delhi' },
  { title: 'NSS SmileFiesta', org: 'CHARUSAT', badge: 'Organizer', date: 'Jan 2025', desc: 'University-wide NSS cultural event' },
  { title: 'Odoo × CHARUSAT', org: 'Media Team', badge: '1L+ Impressions', date: 'Feb 2025', desc: 'Instagram marketing campaigns' },
];

const EXPERIENCE_DATA = [
  { company: 'Cognifyz', role: 'Full Stack Development Intern', date: 'Apr 2025' },
  { company: 'Brainybeam', role: 'Web Design with MERN Stack', date: 'Jun 2025' },
];

const CERTIFICATIONS = [
  { name: 'Deep Learning & Reinforcement Learning', org: 'IBM / Coursera', date: 'Aug 2025', link: LINKS.certLinks.deepLearning },
  { name: 'Server-side JavaScript with Node.js', org: 'NIIT / Coursera', date: 'Aug 2025', link: LINKS.certLinks.nodejs },
  { name: 'Exploratory Data Analysis for ML', org: 'IBM / Coursera', date: 'Jul 2025', link: LINKS.certLinks.eda },
  { name: 'Model Context Protocol', org: 'Anthropic', date: '', link: LINKS.certLinks.mcp },
  { name: 'How to Write and Publish a Scientific Paper', org: 'École Polytechnique de Paris / Coursera', date: '', link: LINKS.certLinks.scientificPaper },
  { name: 'GDSC ML Study Jams', org: 'Google DSC', date: '', link: LINKS.certLinks.gdsc },
];

const EDUCATION = [
  { school: 'CHARUSAT University', degree: 'B.Tech Computer Engineering', period: '2023 – Present', score: 'CGPA 7.43', current: true },
  { school: 'Jay Ambe International School', degree: 'HSC — GSEB', period: '2021 – 2023', score: '58%', current: false },
  { school: 'Jay Ambe International School', degree: 'SSC — GSEB', period: '2020 – 2021', score: '96.07 Percentile', current: false },
];

// ─── Shared Components ───

function SectionHeader({ number, title, subtitle }) {
  return (
    <div className="section-header">
      {number && <span className="section-number">{number}</span>}
      <h2 className="section-title">{title}</h2>
      {subtitle && <p className="section-subtitle">{subtitle}</p>}
    </div>
  );
}

function RevealWrap({ children, delay = 0, visible, className = '' }) {
  return (
    <div
      className={`reveal ${visible ? 'visible' : ''} ${className}`}
      style={delay ? { transitionDelay: `${delay}s` } : undefined}
    >
      {children}
    </div>
  );
}

Object.assign(window, {
  useScrollReveal, useCounter, useScrolled,
  IconGitHub, IconLinkedIn, IconExternal, IconMail, IconArrowDown,
  IconMenu, IconX, IconCamera, IconDownload,
  PROFILE_PHOTO, NAV_LINKS, STATS, PROJECTS, SKILL_GROUPS, PUBLICATION,
  ACHIEVEMENTS, EXPERIENCE_DATA, CERTIFICATIONS, EDUCATION,
  SectionHeader, RevealWrap,
});
