/* ───────────────────────────────────────────────────────────
   SECTIONS — About / Experience / Projects / Skills / Edu / Contact
   ─────────────────────────────────────────────────────────── */

/* About */
function AboutSection(){
  return (
    <section id="about" className="portfolio-section" data-screen-label="02 About">
      <div className="sec-head">
        <div className="left">
          <div className="section-label"><span className="bracket">//</span> 02 — <span>WHOIS</span></div>
          <h2 className="reveal"><span data-glitch="About the operator">About the operator</span></h2>
        </div>
        <div className="meta">
          <div><span className="k">LOC:</span> <span className="v">LHE, PAK</span></div>
          <div><span className="k">STATUS:</span> <span className="v">AVAILABLE</span></div>
          <div><span className="k">FOCUS:</span> <span className="v">AI × MACHINE LEARNING</span></div>
        </div>
      </div>

      <div className="about-grid">
        <div className="about-prose reveal">
          <p>
            I'm a <span className="hl">data scientist</span> and <span className="hl">frontend engineer</span> building
            at the intersection of machine learning and interactive experience — where
            models become <span className="under">interfaces</span> you can actually talk to.
          </p>
          <p>
            My work spans <span className="hl">NLP pipelines</span>, <span className="hl">vision-language models</span>,
            and the glue that makes them feel human: React front-ends, realtime transcription,
            evidence-first LLM evaluation, and serverless architectures that scale without breaking a sweat.
          </p>
          <p>
            Currently wrapping up my BS in Data Science at FAST NUCES, shipping an
            AI-powered recruitment platform as my final-year project, and hunting for
            teams where the bar is <span className="under">high</span> and the problems are <span className="under">unsolved</span>.
          </p>
        </div>

        <div className="reveal">
          <div className="avatar">
            <img src="IMG_0552.jpg?v=2" alt="Omar Bandial" />
            <div className="scan"></div>
            <div className="avatar-label">IDENTITY VERIFIED</div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* Experience */
const EXPERIENCE = [
  {
    role: "Data Science Intern",
    at: "TenX",
    loc: "Lahore, Pakistan",
    date: "Jun 2025 — Aug 2025",
    bullets: [
      "Designed and delivered an <b>NLP-based question generation system</b> for the company's edtech pipeline, automating quiz creation from raw educational content.",
      "Evaluated multiple generative architectures (<b>T5, BART</b>) and distractor strategies, selecting the highest-performing pipeline based on <b>ROUGE benchmarks</b>.",
    ],
    tags: ["T5", "BART", "NLP", "EdTech", "ROUGE"],
  },
  {
    role: "AI/ML Intern",
    at: "Arcana Info (Pvt.) Ltd",
    loc: "Lahore, Pakistan",
    date: "Jun 2024 — Aug 2024",
    bullets: [
      "Built an <b>automated ticket classifier</b> using TF-IDF + Logistic Regression on <b>10K+ tickets</b>, achieving <b>85% accuracy</b> across department and priority categories.",
      "Deployed the model as a <b>Flask REST API</b> with NLTK/spaCy preprocessing pipelines for realtime ticket routing.",
    ],
    tags: ["TF-IDF", "scikit-learn", "Flask", "NLTK", "spaCy"],
  },
];

function ExperienceSection(){
  return (
    <section id="experience" className="portfolio-section" data-screen-label="03 Experience">
      <div className="sec-head">
        <div className="left">
          <div className="section-label"><span className="bracket">//</span> 03 — <span>EXPERIENCE</span></div>
          <h2 className="reveal"><span data-glitch="Work experience">Work experience</span></h2>
        </div>
        <div className="meta">
          <div><span className="k">MODE:</span> <span className="v">CHRONOLOGICAL</span></div>
          <div><span className="k">TOTAL:</span> <span className="v">{EXPERIENCE.length} NODES</span></div>
        </div>
      </div>

      <div className="timeline">
        {EXPERIENCE.map((e, i) => (
          <div className="tl-item reveal" key={i}>
            <div className="tl-head">
              <div className="role">{e.role} <span className="at">@ {e.at}</span></div>
              <div className="date">{e.date}</div>
            </div>
            <div className="tl-sub">{e.at} <span className="loc"> · {e.loc}</span></div>
            <ul>
              {e.bullets.map((b, j) => <li key={j} dangerouslySetInnerHTML={{__html: b}} />)}
            </ul>
            <div className="tags">
              {e.tags.map((t, j) => <span className="tag" key={j}>{t}</span>)}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* Projects */
const PROJECTS = [
  {
    num: "PRJ_001",
    title: "AI-Powered Interviewer",
    sub: "Final Year Project · 2025–2026",
    stack: ["React", "FastAPI", "GPT-4", "Gemini 2.5-Flash", "Whisper", "AWS"],
    stats: [
      { l: "LLMs", v: "3+" },
      { l: "Services", v: "5" },
      { l: "Status", v: "LIVE" },
    ],
    desc: `A <span class="mark">serverless AI recruitment platform</span> that automates candidate screening end-to-end — resume parsing, personalized question generation, async video interviews, and LLM-based evaluation.`,
    bullets: [
      `<b>Hybrid resume parser</b> — pdfplumber with Gemini 2.5-Flash vision fallback for scanned PDFs, mapping to structured JSON schemas.`,
      `<b>LLM-as-a-judge</b> scoring engine using GPT-4 with evidence-first evaluation — extracts transcript quotes before scoring on 1–5 rubrics.`,
      `<b>Realtime stack:</b> Whisper STT + OpenAI TTS, with anti-cheat monitoring via visibility, blur, and mic-mute event logs.`,
      `<b>Serverless AWS:</b> Lambda, S3, SQS, Step Functions + RDS PostgreSQL and DynamoDB for metadata.`,
    ],
    link: null,
  },
  {
    num: "PRJ_002",
    title: "Automatic Question Generator",
    sub: "NLP Pipeline · Open Source",
    stack: ["BART", "Hugging Face", "spaCy", "Sense2Vec", "SQuAD"],
    stats: [
      { l: "ROUGE-1", v: "57.95" },
      { l: "ROUGE-2", v: "46.62" },
      { l: "Train Set", v: "10K" },
    ],
    desc: `Fine-tuned <span class="mark">facebook/bart-base</span> on 10K SQuAD context-answer pairs for MCQ and fill-in-the-blank generation, with a full distractor pipeline deployed as a Streamlit app.`,
    bullets: [
      `<b>Distractor engine:</b> over-generate 20–30 candidates via Sense2Vec, filter with fuzzywuzzy, rank using MMR with SentenceTransformers.`,
      `<b>Answer-aware generation</b> with PKE TextRank keyword extraction and spaCy NER.`,
      `Shipped as a <b>Streamlit web app</b> with live inference and model switching.`,
    ],
    link: "https://github.com/OmarBandial/QuestionsGenerator",
  },
  {
    num: "PRJ_003",
    title: "MedVision AI",
    sub: "Chest X-Ray Diagnosis · Dual-Model",
    stack: ["PyTorch", "MobileNetV2", "DenseNet121", "CheXpert", "Ollama"],
    stats: [
      { l: "Pathologies", v: "14" },
      { l: "Models", v: "2x" },
      { l: "Modalities", v: "3" },
    ],
    desc: `A <span class="mark">dual-model chest X-ray diagnostic system</span> with conversational explanation, fusing image features with patient metadata for multi-label pathology detection.`,
    bullets: [
      `<b>MobileNetV2 classifier</b> on CheXpert — multi-label detection of 14 chest pathologies, fusing age, sex, view, and projection with image features.`,
      `<b>Cross-validated pipeline</b> with custom-trained MobileNetV2 + pre-trained DenseNet121 (torchxrayvision).`,
      `<b>Conversational layer:</b> Flask REST API + <b>Gemma 3 4B (Ollama)</b> integrated into a React/TypeScript frontend for diagnosis explanation.`,
    ],
    link: "https://github.com/OmarBandial/ChestXray-Chatbot",
  },
  {
    num: "PRJ_004",
    title: "Twitter Sentiment Analysis",
    sub: "NLP · Social Media Analytics",
    stack: ["Python", "NLP", "scikit-learn"],
    stats: [
      { l: "Classes", v: "3" },
      { l: "Source", v: "TWITTER" },
      { l: "Type", v: "NLP" },
    ],
    desc: `A <span class="mark">tweet sentiment classifier</span> that categorizes social media posts into positive, negative, or neutral sentiment, providing actionable insights for campaign analysis.`,
    bullets: [
      `<b>NLP preprocessing pipeline</b> for tweet normalization — handling mentions, hashtags, URLs, and slang.`,
      `<b>Multi-class sentiment classification</b> with actionable insights for social media campaign optimization.`,
    ],
    link: null,
  },
  {
    num: "PRJ_005",
    title: "Weather Prediction (RNN)",
    sub: "Time-Series Forecasting · Deep Learning",
    stack: ["Python", "RNN", "TensorFlow", "Time-Series"],
    stats: [
      { l: "Architecture", v: "RNN" },
      { l: "Data", v: "HISTORICAL" },
      { l: "Type", v: "FORECAST" },
    ],
    desc: `A <span class="mark">Recurrent Neural Network model</span> for weather pattern prediction, trained on historical meteorological data with custom preprocessing for temporal sequences.`,
    bullets: [
      `<b>Sequence-to-sequence RNN</b> architecture tuned for multi-step weather forecasting on historical datasets.`,
      `<b>Time-series preprocessing</b> — windowing, normalization, and lag-feature engineering for temporal patterns.`,
    ],
    link: null,
  },
  {
    num: "PRJ_006",
    title: "YouTube Public Bias Analyzer",
    sub: "ML · Web Scraping · Sentiment",
    stack: ["Python", "scikit-learn", "BeautifulSoup", "Web Scraping"],
    stats: [
      { l: "Source", v: "YOUTUBE" },
      { l: "Pipeline", v: "E2E" },
      { l: "Type", v: "ML" },
    ],
    desc: `An <span class="mark">end-to-end ML pipeline</span> that scrapes YouTube video metadata and comments to analyze public reception bias and predict video performance.`,
    bullets: [
      `<b>Automated data extraction</b> via web scraping — comments, likes, views, and engagement metrics.`,
      `<b>ML-driven bias analysis</b> combining sentiment scoring with performance prediction models.`,
    ],
    link: null,
  },
  {
    num: "PRJ_007",
    title: "News Bias & Article Predictor",
    sub: "ML · Media Analytics",
    stack: ["Python", "scikit-learn", "NLP"],
    stats: [
      { l: "Classes", v: "3" },
      { l: "Scope", v: "MULTI-SRC" },
      { l: "Type", v: "ML" },
    ],
    desc: `A <span class="mark">machine learning system</span> that predicts future article bias and sentiment using historical publication trends across news sources.`,
    bullets: [
      `<b>Trend-based prediction</b> — models trained on past publication patterns to forecast bias in upcoming articles.`,
      `<b>Multi-source sentiment analysis</b> classifying articles as positive, negative, or neutral on specific topics.`,
    ],
    link: null,
  },
  {
    num: "PRJ_008",
    title: "Banking Platform",
    sub: "Full-Stack · Secure Web App",
    stack: ["Flask", "SQL", "Tailwind CSS", "Python"],
    stats: [
      { l: "Stack", v: "FULL" },
      { l: "Auth", v: "SECURE" },
      { l: "Type", v: "WEBAPP" },
    ],
    desc: `A <span class="mark">secure full-stack banking website</span> with authentication, transaction management, and responsive UI — built end-to-end with Flask and SQL.`,
    bullets: [
      `<b>Flask backend</b> with SQL database for account management, transactions, and secure authentication.`,
      `<b>Responsive frontend</b> styled with Tailwind CSS for a clean, modern banking interface.`,
    ],
    link: null,
  },
];

function ProjectsSection(){
  const scrollerRef = React.useRef(null);
  const [progress, setProgress] = React.useState(0);

  const scrollBy = (dir) => {
    const s = scrollerRef.current;
    if (!s) return;
    s.scrollBy({ left: dir * Math.min(740, s.clientWidth * 0.9), behavior: 'smooth' });
  };

  React.useEffect(() => {
    const s = scrollerRef.current;
    if (!s) return;
    const onScroll = () => {
      const max = s.scrollWidth - s.clientWidth;
      setProgress(max > 0 ? s.scrollLeft / max : 0);
    };
    s.addEventListener('scroll', onScroll, { passive: true });
    onScroll();

    const onWheel = (e) => {
      if (Math.abs(e.deltaY) < Math.abs(e.deltaX)) return;
      const max = s.scrollWidth - s.clientWidth;
      const atLeft = s.scrollLeft <= 0;
      const atRight = s.scrollLeft >= max - 1;
      if ((e.deltaY < 0 && atLeft) || (e.deltaY > 0 && atRight)) return;
      e.preventDefault();
      s.scrollBy({ left: e.deltaY * 2, behavior: 'smooth' });
    };
    s.addEventListener('wheel', onWheel, { passive: false });

    return () => {
      s.removeEventListener('scroll', onScroll);
      s.removeEventListener('wheel', onWheel);
    };
  }, []);

  return (
    <section id="projects" className="portfolio-section" data-screen-label="04 Projects">
      <div className="sec-head">
        <div className="left">
          <div className="section-label"><span className="bracket">//</span> 04 — <span>PROJECTS</span></div>
          <h2 className="reveal"><span data-glitch="Selected projects">Selected projects</span></h2>
        </div>
        <div className="meta">
          <div><span className="k">COUNT:</span> <span className="v">{PROJECTS.length}</span></div>
          <div><span className="k">SORT:</span> <span className="v">IMPACT DESC</span></div>
        </div>
      </div>

      <div className="projects-intro">
        <div style={{display: 'flex', gap: 14, alignItems: 'center'}}>
          <span className="hint">SCROLL TO BROWSE</span>
          <button className="btn" style={{padding: '6px 10px'}} onClick={() => scrollBy(-1)}>←</button>
          <button className="btn" style={{padding: '6px 10px'}} onClick={() => scrollBy(1)}>→</button>
          <div style={{width: 120, height: 1, background: 'var(--green-ghost)', position: 'relative'}}>
            <div style={{position: 'absolute', left: 0, top: -1, height: 3, width: `${progress * 100}%`, background: 'var(--green)', boxShadow: '0 0 8px var(--green-glow)'}} />
          </div>
        </div>
      </div>

      <div className="projects-scroller" ref={scrollerRef}>
        {PROJECTS.map((p, i) => (
          <div className="project-card" key={i}>
            <div className="terminal-hd">
              <div className="dots"><span></span><span></span><span></span></div>
              <div className="title">{p.num} — {p.title.toLowerCase().replace(/\s+/g, '_')}.md</div>
              <div className="ctrl">— □ ×</div>
            </div>
            <div className="pc-body">
              <div className="pc-num">{p.num}</div>
              <h3 className="pc-title">{p.title}</h3>
              <div className="pc-sub">{p.sub}</div>

              <div className="pc-stats">
                {p.stats.map((s, j) => (
                  <div className="pc-stat" key={j}>
                    <div className="l">{s.l}</div>
                    <div className="v">{s.v}</div>
                  </div>
                ))}
              </div>

              <div className="pc-desc" dangerouslySetInnerHTML={{__html: p.desc}} />
              <ul className="pc-bullets">
                {p.bullets.map((b, j) => <li key={j} dangerouslySetInnerHTML={{__html: b}} />)}
              </ul>
            </div>
            <div className="pc-footer">
              <div className="pc-tags">
                {p.stack.map((t, j) => <span className="tag" key={j}>{t}</span>)}
              </div>
              {p.link && (
                <a className="link" href={p.link} target="_blank" rel="noreferrer">
                  ./open_repo <span>→</span>
                </a>
              )}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* Skills */
const SKILLS = [
  { label: "Languages", items: ["Python", "SQL", "JavaScript", "TypeScript", "C++", "C", "C#", "HTML/CSS"] },
  { label: "Frameworks", items: ["FastAPI", "Flask", "React", "Node.js", "Streamlit", "Tailwind CSS", "Vite", "Apache Spark"] },
  { label: "AI / ML", items: ["PyTorch", "GPT-4", "Gemini", "Whisper", "Hugging Face", "scikit-learn", "spaCy", "NLTK", "Ollama", "RNN", "Time-Series"] },
  { label: "Cloud & DevOps", items: ["AWS Lambda", "S3", "SQS", "Step Functions", "RDS", "PostgreSQL", "Docker", "Git", "HIVE"] },
  { label: "Libraries", items: ["pandas", "NumPy", "Plotly", "BeautifulSoup", "KeyBERT", "Sense2Vec", "SentenceTransformers"] },
];

function SkillsSection(){
  return (
    <section id="skills" className="portfolio-section" data-screen-label="05 Skills">
      <div className="sec-head">
        <div className="left">
          <div className="section-label"><span className="bracket">//</span> 05 — <span>SKILLS</span></div>
          <h2 className="reveal"><span data-glitch="Tools & technologies">Tools & technologies</span></h2>
        </div>
        <div className="meta">
          <div><span className="k">GROUPS:</span> <span className="v">{SKILLS.length}</span></div>
          <div><span className="k">TOTAL:</span> <span className="v">{SKILLS.reduce((a, b) => a + b.items.length, 0)} IMPORTS</span></div>
        </div>
      </div>

      <div className="skills-grid">
        {SKILLS.map((g, i) => (
          <div className="skill-block reveal" key={i}>
            <div className="sb-head">
              <span>./{g.label.toLowerCase().replace(/\s*&\s*/g, '_').replace(/\s+/g, '_').replace('/','_')}</span>
              <span className="sb-count">{String(g.items.length).padStart(2, '0')}</span>
            </div>
            <div className="sb-items">
              {g.items.map((it, j) => (
                <span className="skill-item" key={j}>
                  <span className="dot"></span>{it}
                </span>
              ))}
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* Education */
function EducationSection(){
  return (
    <section id="education" className="portfolio-section" data-screen-label="06 Education">
      <div className="sec-head">
        <div className="left">
          <div className="section-label"><span className="bracket">//</span> 06 — <span>EDUCATION</span></div>
          <h2 className="reveal"><span data-glitch="Academic background">Academic background</span></h2>
        </div>
      </div>

      <div className="edu-card reveal">
        <div className="left">
          <div className="uni">FAST NUCES University</div>
          <div className="degree">Bachelor of Science in Data Science</div>
          <div className="honors">
            <span className="honor-chip">Dean's List · Spring 2025</span>
            <span className="honor-chip">Dean's List · Fall 2025</span>
            <span className="honor-chip">Dean's List · Spring 2026</span>
          </div>
        </div>
        <div className="meta">
          <div><span className="hl">Aug 2022 — Jun 2026</span></div>
          <div>Lahore, Pakistan</div>
        </div>
      </div>
    </section>
  );
}

/* Contact */
function ContactSection(){
  return (
    <section id="contact" className="portfolio-section contact" data-screen-label="07 Contact">
      <div className="section-label"><span className="bracket">//</span> 07 — <span>ESTABLISH CONNECTION</span></div>
      <h2 className="reveal">
        Let's <span className="stroke">build</span><br/>
        something <span className="stroke">real</span><span className="cursor-char"></span>
      </h2>
      <p className="subline">
        Open to full-time roles, contract work, and interesting collaborations.
        If you're working on AI systems, developer tools, or anything with a pulse —
        my inbox is always listening.
      </p>

      <div className="contact-grid">
        <a className="contact-item" href="mailto:omar.bandial@gmail.com">
          <div className="icon">@</div>
          <div className="ci-body">
            <div className="l">Email</div>
            <div className="v">omar.bandial@gmail.com</div>
          </div>
        </a>
        <a className="contact-item" href="https://www.linkedin.com/in/omar-farooq-bandial-457933338/" target="_blank" rel="noreferrer">
          <div className="icon">in</div>
          <div className="ci-body">
            <div className="l">LinkedIn</div>
            <div className="v">/omar-farooq-bandial</div>
          </div>
        </a>
        <a className="contact-item" href="https://github.com/OmarBandial" target="_blank" rel="noreferrer">
          <div className="icon">{"</>"}</div>
          <div className="ci-body">
            <div className="l">GitHub</div>
            <div className="v">/OmarBandial</div>
          </div>
        </a>
        <a className="contact-item" href="tel:+923049475755">
          <div className="icon">✆</div>
          <div className="ci-body">
            <div className="l">Phone</div>
            <div className="v">+92 304 9475755</div>
          </div>
        </a>
      </div>

      <div style={{display: 'flex', gap: 14, flexWrap: 'wrap'}}>
        <a className="btn primary" href="mailto:omar.bandial@gmail.com">
          <span className="corner tl"></span><span className="corner tr"></span>
          <span className="corner bl"></span><span className="corner br"></span>
          SEND MAIL <span className="arrow">→</span>
        </a>
        <a className="btn" href="Omar_Bandial_resume_2026.pdf" download>
          <span className="corner tl"></span><span className="corner tr"></span>
          <span className="corner bl"></span><span className="corner br"></span>
          DOWNLOAD_RESUME.pdf
        </a>
        <a className="btn" href="https://calendar.app.google/LPXYU1eCQ8PZJJLFA" target="_blank" rel="noreferrer">
          <span className="corner tl"></span><span className="corner tr"></span>
          <span className="corner bl"></span><span className="corner br"></span>
          SCHEDULE_CALL()
        </a>
      </div>

      <div className="foot" style={{marginTop: 80}}>
        <div>© 2026 · OMAR BANDIAL · <span className="ok">SYSTEM STABLE</span></div>
        <div>BUILT WITH REACT · CANVAS · TOO MUCH CHAI</div>
      </div>
    </section>
  );
}

Object.assign(window, {
  AboutSection, ExperienceSection, ProjectsSection,
  SkillsSection, EducationSection, ContactSection,
});