import React, { useEffect, useMemo, useState } from 'react'
import { createRoot } from 'react-dom/client'
import {
  ArrowDownRight, ArrowRight, ArrowUpRight, BriefcaseBusiness, Check,
  Code2, ExternalLink, Code, Globe2, GraduationCap, Languages, Mail,
  MapPin, Menu, MonitorSmartphone, Moon, Sparkles, X, Zap
} from 'lucide-react'
import './style.css'

const copy = {
  fr: {
    nav: ['À propos', 'Compétences', 'Projets', 'Parcours', 'Contact'],
    eyebrow: 'PORTFOLIO • 2026',
    role: 'Ingénieure informatique',
    headlineA: 'Je transforme',
    headlineB: 'les idées en',
    headlineC: 'expériences',
    headlineD: 'numériques.',
    intro: 'Développement logiciel, applications web et mobiles, bases de données et interfaces pensées pour résoudre des problèmes concrets.',
    projectsBtn: 'Explorer mes projets',
    contactBtn: 'Me contacter',
    available: 'Ouverte aux opportunités',
    scroll: 'Défiler pour explorer',
    aboutKicker: '01 / À PROPOS',
    aboutTitle: "Technique dans l'approche.\nCréative dans l'exécution.",
    aboutText: "Diplômée d'une Licence en Ingénierie Informatique et Développement Logiciel, j'ai acquis une expérience professionnelle à travers des stages en systèmes d'information et en développement. J'aime concevoir des solutions structurées, utiles et agréables à utiliser.",
    facts: ['Développement web & mobile', 'Backend & bases de données', 'Analyse et résolution de problèmes'],
    skillsKicker: '02 / COMPÉTENCES',
    skillsTitle: 'Des bases solides.\nUne approche orientée produit.',
    skillsNote: 'Compétences reprises de mon CV — présentées par domaine.',
    projectsKicker: '03 / PROJETS SÉLECTIONNÉS',
    projectsTitle: 'Du concret, pas seulement du code.',
    projectsSub: 'Quelques réalisations issues de mon parcours académique et professionnel.',
    viewGallery: 'Voir les captures',
    close: 'Fermer',
    parcoursKicker: '04 / PARCOURS',
    parcoursTitle: 'Apprendre. Construire. Progresser.',
    education: 'Formation',
    degree: 'Licence en Ingénierie Informatique et Développement Logiciel',
    school: 'Faculté des Sciences de Tétouan — Université Abdelmalek Essaâdi',
    experiences: 'Expériences professionnelles',
    exp1: "Stage — Direction des Systèmes d'Information",
    exp1desc: 'Amendis, Tétouan آ· Application mobile de gestion des services clients.',
    exp2: "Stage — Direction des Systèmes d'Information",
    exp2desc: 'Amendis, Tétouan آ· Conception et développement de VeoParc.',
    exp3: 'Stage — Trésorerie Générale du Royaume',
    exp3desc: 'Trésorerie Provinciale de Tétouan آ· Opérations administratives et financières.',
    contactKicker: '05 / CONTACT',
    contactTitle: 'Un projet en tête ?\nParlons-en.',
    contactText: 'Pour une opportunité professionnelle, une collaboration ou une mission freelance, vous pouvez me contacter.',
    email: 'Envoyer un e-mail',
    phone: '+212 784-231590',
    whatsapp: 'Discuter sur WhatsApp',
    footer: 'Conçu avec intention. Développé avec soin.',
    projectDetails: 'Détails du projet',
    technologies: 'Technologies',
    galleryEmpty: 'Les captures de ce projet seront ajoutées prochainement.',
    top: 'Retour en haut'
  },
  en: {
    nav: ['About', 'Skills', 'Projects', 'Journey', 'Contact'],
    eyebrow: 'PORTFOLIO • 2026',
    role: 'Software Engineer',
    headlineA: 'I turn',
    headlineB: 'ideas into',
    headlineC: 'digital',
    headlineD: 'experiences.',
    intro: 'Software development, web and mobile applications, databases, and interfaces designed to solve real problems.',
    projectsBtn: 'Explore my work',
    contactBtn: 'Get in touch',
    available: 'Open to opportunities',
    scroll: 'Scroll to explore',
    aboutKicker: '01 / ABOUT',
    aboutTitle: 'Technical in approach.\nCreative in execution.',
    aboutText: "Diplômée d'une Licence en Ingénierie Informatique et Développement Logiciel, j'ai acquis une expérience professionnelle à travers des stages en systèmes d'information et en développement. J'aime concevoir des solutions structurées, utiles et agréables à utiliser.",
    facts: ['Web & mobile development', 'Backend & databases', 'Analysis and problem solving'],
    skillsKicker: '02 / SKILLS',
    skillsTitle: 'Strong foundations.\nProduct-minded execution.',
    skillsNote: 'Skills taken from my CV — grouped by area.',
    projectsKicker: '03 / SELECTED WORK',
    projectsTitle: 'Real work, beyond code.',
    projectsSub: 'Selected projects from my academic and professional journey.',
    viewGallery: 'View screenshots',
    close: 'Close',
    parcoursKicker: '04 / JOURNEY',
    parcoursTitle: 'Learn. Build. Improve.',
    education: 'Education',
    degree: 'Licence in Computer Engineering and Software Development',
    school: 'Faculty of Sciences of Tetouan — Abdelmalek Essaâdi University',
    experiences: 'Professional experience',
    exp1: "Stage — Direction des Systèmes d'Information",
    exp1desc: 'Amendis, Tetouan آ· Customer services mobile application.',
    exp2: 'Internship — Information Systems Department',
    exp2desc: 'Amendis, Tetouan آ· VeoParc design and development.',
    exp3: 'Internship — Treasury General of the Kingdom',
    exp3desc: 'Provincial Treasury of Tetouan آ· Administrative and financial operations.',
    contactKicker: '05 / CONTACT',
    contactTitle: 'Have a project in mind?\nLet’s talk.',
    contactText: 'For a professional opportunity, collaboration or freelance project, feel free to reach out.',
    email: 'Send an email',
    phone: '+212 784-231590',
    whatsapp: 'Chat on WhatsApp',
    footer: 'Designed with intent. Built with care.',
    projectDetails: 'Project details',
    technologies: 'Technologies',
    galleryEmpty: 'Screenshots for this project will be added soon.',
    top: 'Back to top'
  }
}

const skills = [
  { title: 'Web & mobile', items: ['HTML5', 'CSS3', 'JavaScript', 'AJAX', 'PHP', 'React Native', 'Expo'] },
  { title: 'Backend & data', items: ['Spring Boot', 'REST API', 'JWT', 'JSON', 'MySQL', 'SQL'] },
  { title: 'Programming', items: ['Java', 'Python', 'C', 'C++'] },
  { title: 'Tools & methods', items: ['UML', 'Merise', 'Git', 'Code', 'WAMP', 'Pack Office'] },
]

const projects = [
  {
    id: "amendis', number: '01', name: 'Application mobile Amendis",
    type: "Mobile application', year: '2026",
    description: 'Application mobile de gestion des services clients : consultation de consommation, factures, paiement, réclamations et notifications.',
    enDescription: 'Customer services mobile application: consumption history, bills, payments, complaints and notifications.',
    tech: ['React Native', 'Spring Boot', 'JWT', 'MySQL'],
    visual: 'mobile', screenshots: [
      { src: import.meta.env.BASE_URL + 'images/amendis/WhatsApp Image 2026-10-20 at 11.06.47.jpeg', alt: 'Capture AMENDIS' },
      { src: import.meta.env.BASE_URL + 'images/amendis/WhatsApp Image 2026-10-20 at 11.06.51.jpeg', alt: 'Capture AMENDIS' },
      { src: import.meta.env.BASE_URL + 'images/amendis/WhatsApp Image 2026-10-20 at 11.06.52.jpeg', alt: 'Capture AMENDIS' },
      { src: import.meta.env.BASE_URL + 'images/amendis/WhatsApp Image 2026-10-20 at 11.06.53.jpeg', alt: 'Capture AMENDIS' },
      { src: import.meta.env.BASE_URL + 'images/amendis/WhatsApp Image 2026-10-20 at 11.06.54.jpeg', alt: 'Capture AMENDIS' },
      { src: import.meta.env.BASE_URL + 'images/amendis/WhatsApp Image 2026-10-20 at 11.06.57 (1).jpeg', alt: 'Capture AMENDIS' },
      { src: import.meta.env.BASE_URL + 'images/amendis/WhatsApp Image 2026-10-20 at 11.06.57 (2).jpeg', alt: 'Capture AMENDIS' },
      { src: import.meta.env.BASE_URL + 'images/amendis/WhatsApp Image 2026-10-20 at 11.06.57 (3).jpeg', alt: 'Capture AMENDIS' },
      { src: import.meta.env.BASE_URL + 'images/amendis/WhatsApp Image 2026-10-20 at 11.06.57.jpeg', alt: 'Capture AMENDIS' },
      { src: import.meta.env.BASE_URL + 'images/amendis/WhatsApp Image 2026-10-20 at 11.06.58 (1).jpeg', alt: 'Capture AMENDIS' },
      { src: import.meta.env.BASE_URL + 'images/amendis/WhatsApp Image 2026-10-20 at 11.06.58 (2).jpeg', alt: 'Capture AMENDIS' },
      { src: import.meta.env.BASE_URL + 'images/amendis/WhatsApp Image 2026-10-20 at 11.06.58 (3).jpeg', alt: 'Capture AMENDIS' },
      { src: import.meta.env.BASE_URL + 'images/amendis/WhatsApp Image 2026-10-20 at 11.06.58.jpeg', alt: 'Capture AMENDIS' },
      { src: import.meta.env.BASE_URL + 'images/amendis/WhatsApp Image 2026-10-20 at 11.06.59 (1).jpeg', alt: 'Capture AMENDIS' },
      { src: import.meta.env.BASE_URL + 'images/amendis/WhatsApp Image 2026-10-20 at 11.06.59.jpeg', alt: 'Capture AMENDIS' },
      { src: import.meta.env.BASE_URL + 'images/amendis/WhatsApp Image 2026-10-20 at 11.07.00 (1).jpeg', alt: 'Capture AMENDIS' },
      { src: import.meta.env.BASE_URL + 'images/amendis/WhatsApp Image 2026-10-20 at 11.07.00 (2).jpeg', alt: 'Capture AMENDIS' },
      { src: import.meta.env.BASE_URL + 'images/amendis/WhatsApp Image 2026-10-20 at 11.07.00 (3).jpeg', alt: 'Capture AMENDIS' },
      { src: import.meta.env.BASE_URL + 'images/amendis/WhatsApp Image 2026-10-20 at 11.07.00 (4).jpeg', alt: 'Capture AMENDIS' },
      { src: import.meta.env.BASE_URL + 'images/amendis/WhatsApp Image 2026-10-20 at 11.07.00.jpeg', alt: 'Capture AMENDIS' },
      { src: import.meta.env.BASE_URL + 'images/amendis/WhatsApp Image 2026-10-20 at 11.07.01 (1).jpeg', alt: 'Capture AMENDIS' },
      { src: import.meta.env.BASE_URL + 'images/amendis/WhatsApp Image 2026-10-20 at 11.07.01 (2).jpeg', alt: 'Capture AMENDIS' },
      { src: import.meta.env.BASE_URL + 'images/amendis/WhatsApp Image 2026-10-20 at 11.07.01.jpeg', alt: 'Capture AMENDIS' },
      { src: import.meta.env.BASE_URL + 'images/amendis/WhatsApp Image 2026-10-20 at 11.07.02 (1).jpeg', alt: 'Capture AMENDIS' },
      { src: import.meta.env.BASE_URL + 'images/amendis/WhatsApp Image 2026-10-20 at 11.07.02 (2).jpeg', alt: 'Capture AMENDIS' },
      { src: import.meta.env.BASE_URL + 'images/amendis/WhatsApp Image 2026-10-20 at 11.07.02.jpeg', alt: 'Capture AMENDIS' },
      { src: import.meta.env.BASE_URL + 'images/amendis/WhatsApp Image 2026-10-20 at 11.07.03 (1).jpeg', alt: 'Capture AMENDIS' },
      { src: import.meta.env.BASE_URL + 'images/amendis/WhatsApp Image 2026-10-20 at 11.07.03.jpeg', alt: 'Capture AMENDIS' },
    ]
  },
  {
    id: "veoparc', number: '02', name: 'VeoParc",
    type: "Web application', year: '2025",
    description: 'Conception et développement d’une plateforme de gestion du parc informatique : employés, matériels, ordinateurs et maintenance, avec des interfaces adaptées aux rôles.',
    enDescription: 'Design and development of an IT asset management platform covering employees, equipment, computers and maintenance, with role-specific interfaces.',
    tech: ['HTML5', 'CSS3', 'JavaScript', 'PHP', 'MySQL', 'Bootstrap', 'API REST'],
    visual: 'veoparc',
    screenshots: [
        { src: `${import.meta.env.BASE_URL}images/veoparc/1.png`, alt: 'Capture 1 de VeoParc' },
        { src: `${import.meta.env.BASE_URL}images/veoparc/2.png`, alt: 'Capture 2 de VeoParc' },
        { src: `${import.meta.env.BASE_URL}images/veoparc/3.png`, alt: 'Capture 3 de VeoParc' },
        { src: `${import.meta.env.BASE_URL}images/veoparc/4.png`, alt: 'Capture 4 de VeoParc' },
        { src: `${import.meta.env.BASE_URL}images/veoparc/5.png`, alt: 'Capture 5 de VeoParc' },
      ]
  },
  {
    id: "fraude', number: '03', name: 'Détection de fraude aux examens",
    type: "Artificial intelligence', year: 'Projet académique",
    description: 'Solution basée sur l’intelligence artificielle pour détecter automatiquement des comportements suspects pendant les examens.',
    enDescription: 'An AI-based solution designed to automatically detect suspicious behaviours during exams.',
    tech: ['Intelligence artificielle'],
    visual: 'ai', screenshots: []
  },
  {
    id: "examens', number: '04', name: 'Plateforme de gestion des examens",
    type: "Web application', year: 'Projet académique",
    description: 'Plateforme web centralisée pour gérer les examens, les étudiants et les résultats.',
    enDescription: 'Centralized web platform for managing exams, students and results.',
    tech: ['PHP', 'MySQL', 'HTML5', 'CSS3', 'JavaScript'],
    visual: 'exam',
    screenshots: [
      { src: `${import.meta.env.BASE_URL}images/exam-online/screenshot-01.png`, alt: 'Capture 1 de la plateforme de gestion des examens' },
      { src: `${import.meta.env.BASE_URL}images/exam-online/screenshot-02.png`, alt: 'Capture 2 de la plateforme de gestion des examens' },
      { src: `${import.meta.env.BASE_URL}images/exam-online/screenshot-03.png`, alt: 'Capture 3 de la plateforme de gestion des examens' },
      { src: `${import.meta.env.BASE_URL}images/exam-online/screenshot-04.png`, alt: 'Capture 4 de la plateforme de gestion des examens' },
      { src: `${import.meta.env.BASE_URL}images/exam-online/screenshot-05.png`, alt: 'Capture 5 de la plateforme de gestion des examens' },
      { src: `${import.meta.env.BASE_URL}images/exam-online/screenshot-06.png`, alt: 'Capture 6 de la plateforme de gestion des examens' }
    ]
  }
]

function Orb() {
  return <div className="orb-scene" aria-hidden="true">
    <div className="orb-glow" />
    <div className="orb">
      <div className="orb-grid" />
      <div className="orb-shine" />
    </div>
    <div className="orbit orbit-one" /><div className="orbit orbit-two" />
    <div className="orb-label label-a">REACT / UI</div>
    <div className="orb-label label-b">BUILD · SHIP · IMPROVE</div>
  </div>
}

function ProjectVisual({ type }) {
  if (type === 'veoparc') return <div className="project-visual veoparc-visual"><span className="visual-tag">ASSET MANAGEMENT</span><div className="visual-window"><div className="window-dots"><i/><i/><i/></div><div className="visual-bars"><b/><b/><b/></div><div className="visual-panels"><span/><span/><span/></div></div><span className="visual-number">VP_02</span></div>
  if (type === 'mobile') return <div className="project-visual mobile-visual"><div className="phone"><div className="phone-speaker"/><span className="phone-kicker">AMENDIS</span><div className="phone-card"/><div className="phone-lines"/><div className="phone-lines short"/><div className="phone-bottom"/></div><span className="visual-tag">MOBILE EXPERIENCE</span></div>
  if (type === 'ai') return <div className="project-visual ai-visual"><div className="scan-frame"><span/><span/><span/><span/></div><div className="scan-line"/><div className="ai-core">AI</div><span className="visual-tag">INTELLIGENT DETECTION</span></div>
  return <div className="project-visual exam-visual"><div className="exam-window"><div className="exam-top"/><div className="exam-side"/><div className="exam-content"><b/><b/><b/><span/></div></div><span className="visual-tag">EXAM MANAGEMENT</span></div>
}

function App() {
  const [lang, setLang] = useState('fr')
  const [menuOpen, setMenuOpen] = useState(false)
  const [activeProject, setActiveProject] = useState(null)
  const [activeImage, setActiveImage] = useState(0)
  const t = copy[lang]
  const active = projects.find(p => p.id === activeProject)
  const projectDescription = p => lang === 'fr' ? p.description : p.enDescription

  useEffect(() => {
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          entry.target.classList.add('in-view')
          observer.unobserve(entry.target)
        }
      })
    }, { threshold: 0.12 })
    document.querySelectorAll('.reveal').forEach(el => observer.observe(el))
    return () => observer.disconnect()
  }, [])

  useEffect(() => {
    document.body.style.overflow = activeProject ? 'hidden' : ''
    const onKey = e => {
      if (e.key === 'Escape') setActiveProject(null)
      if (active && e.key === 'ArrowRight') setActiveImage(i => (i + 1) % Math.max(active.screenshots.length, 1))
      if (active && e.key === 'ArrowLeft') setActiveImage(i => (i - 1 + Math.max(active.screenshots.length, 1)) % Math.max(active.screenshots.length, 1))
    }
    window.addEventListener('keydown', onKey)
    return () => { document.body.style.overflow = ''; window.removeEventListener('keydown', onKey) }
  }, [activeProject, active])

  const openProject = id => { setActiveProject(id); setActiveImage(0) }
  const scrollTo = id => { setMenuOpen(false); document.getElementById(id)?.scrollIntoView({ behavior: 'smooth' }) }

  return <div className="app-shell">
    <div className="noise" aria-hidden="true" />
    <header className="topbar">
      <a className="brand" href="#home" onClick={e => {e.preventDefault(); scrollTo('home')}}><span className="brand-mark">D</span><span>DOUAE<span className="brand-dot">.</span>DEV</span></a>
      <nav className={menuOpen ? 'nav-links open' : 'nav-links'}>
        {t.nav.map((item, i) => <a key={item} href={'#'+['about','skills','projects','journey','contact'][i]} onClick={e => {e.preventDefault();scrollTo(['about','skills','projects','journey','contact'][i])}}>{item}</a>)}
      </nav>
      <div className="top-actions">
        <button className="language-toggle" onClick={() => setLang(lang === 'fr' ? 'en' : 'fr')} aria-label="Change language"><Languages size={15}/>{lang === 'fr' ? 'EN' : 'FR'}</button>
        <button className="menu-toggle" onClick={() => setMenuOpen(!menuOpen)} aria-label="Open menu">{menuOpen ? <X/> : <Menu/>}</button>
      </div>
    </header>

    <main>
      <section className="hero section-wrap" id="home">
        <div className="hero-copy">
          <div className="status-pill"><span className="status-dot"/>{t.available}</div>
          <p className="eyebrow"><span className="eyebrow-line"/> {t.eyebrow}</p>
          <h1>{t.headlineA}<br/>{t.headlineB} <em>{t.headlineC}</em><br/><span className="outline-text">{t.headlineD}</span></h1>
          <p className="hero-role">{t.role} <span>·</span> GOUANIS Douae</p>
          <p className="hero-intro">{t.intro}</p>
          <div className="hero-actions">
            <button className="button button-primary" onClick={() => scrollTo('projects')}>{t.projectsBtn}<ArrowUpRight size={17}/></button>
            <button className="button button-ghost" onClick={() => window.open('https://wa.me/212784231590', '_blank', 'noopener,noreferrer')}>{t.contactBtn}<ArrowDownRight size={17}/></button>
            <a className="button cv-download" href={import.meta.env.BASE_URL + 'cv-douae.pdf'} download>Télécharger mon CV <ArrowUpRight size={17}/></a>
          </div>
          <div className="hero-meta"><span><MapPin size={14}/> Tétouan, Maroc</span><span className="meta-separator"/><span><Sparkles size={14}/> React Native · Java · PHP</span></div>
        </div>
        <div className="hero-art"><div className="art-grid"/><Orb/><div className="floating-chip chip-top"><Code2 size={15}/> SOFTWARE</div><div className="floating-chip chip-bottom"><Zap size={15}/> CREATIVE LOGIC</div><div className="art-index">01 <span>/ 05</span></div></div>
        <a href="#about" className="scroll-cue"><span className="scroll-line"/>{t.scroll}</a>
      </section>

      <section className="about section-wrap section-pad" id="about">
        <div className="section-heading reveal"><p className="eyebrow">{t.aboutKicker}</p><h2>{t.aboutTitle.split('\\n').map((s,i)=><React.Fragment key={s}>{i>0&&<br/>}{s}</React.Fragment>)}</h2></div>
        <div className="about-content reveal"><p>{t.aboutText}</p><div className="fact-list">{t.facts.map((fact,i)=><div className="fact" key={fact}><span>0{i+1}</span><p>{fact}</p><ArrowUpRight size={16}/></div>)}</div></div>
      </section>

      <section className="skills section-wrap section-pad" id="skills">
        <div className="section-heading reveal"><p className="eyebrow">{t.skillsKicker}</p><h2>{t.skillsTitle.split('\\n').map((s,i)=><React.Fragment key={s}>{i>0&&<br/>}{s}</React.Fragment>)}</h2><p className="section-note">{t.skillsNote}</p></div>
        <div className="skill-grid">
          {skills.map((group,i)=><article className="skill-card reveal" key={group.title} style={{transitionDelay:`${i*90}ms`}}><div className="skill-card-top"><span className="skill-index">0{i+1}</span><Code2 size={18}/></div><h3>{group.title}</h3><div className="skill-tags">{group.items.map(item=><span key={item}>{item}</span>)}</div></article>)}
        </div>
      </section>

      <section className="projects section-wrap section-pad" id="projects">
        <div className="projects-heading reveal"><div className="section-heading"><p className="eyebrow">{t.projectsKicker}</p><h2>{t.projectsTitle}</h2><p className="section-note">{t.projectsSub}</p></div><span className="project-count">04 <i>PROJECTS</i></span></div>
        <div className="project-grid">
          {projects.map((p,i)=><article className={'project-card reveal project-'+p.id} key={p.id} style={{transitionDelay:`${i*90}ms`}}>
            <button className="project-open" onClick={() => openProject(p.id)} aria-label={`${t.viewGallery}: ${p.name}`}>
              <div className="project-card-head"><span>{p.number} / 04</span><span>{p.year}</span></div>
              <ProjectVisual type={p.visual}/>
              <div className="project-card-body"><div className="project-type">{p.type}</div><h3>{p.name}</h3><p>{projectDescription(p)}</p><div className="project-tech">{p.tech.slice(0,4).map(x=><span key={x}>{x}</span>)}{p.tech.length>4&&<span>+{p.tech.length-4}</span>}</div><div className="project-card-link">{t.viewGallery}<ArrowUpRight size={17}/></div></div>
            </button>
          </article>)}
        </div>
      </section>

      <section className="journey section-wrap section-pad" id="journey">
        <div className="section-heading reveal"><p className="eyebrow">{t.parcoursKicker}</p><h2>{t.parcoursTitle}</h2></div>
        <div className="journey-grid">
          <div className="journey-column reveal"><div className="journey-label"><GraduationCap size={18}/>{t.education}</div><div className="timeline-item"><span className="timeline-dot"/><p className="timeline-date">2023–2026</p><h3>{t.degree}</h3><p>{t.school}</p></div></div>
          <div className="journey-column reveal"><div className="journey-label"><BriefcaseBusiness size={18}/>{t.experiences}</div>
            <div className="timeline-item"><span className="timeline-dot"/><p className="timeline-date">2026 · 2 mois</p><h3>{t.exp1}</h3><p>{t.exp1desc}</p></div>
            <div className="timeline-item"><span className="timeline-dot"/><p className="timeline-date">2025 · 2 mois</p><h3>{t.exp2}</h3><p>{t.exp2desc}</p></div>
            <div className="timeline-item"><span className="timeline-dot"/><p className="timeline-date">2025 · 2 mois</p><h3>{t.exp3}</h3><p>{t.exp3desc}</p></div>
          </div>
        </div>
      </section>

      <section className="contact section-wrap section-pad" id="contact">
        <div className="contact-panel reveal"><div className="contact-orbit"/><p className="eyebrow">{t.contactKicker}</p><h2>{t.contactTitle.split('\\n').map((s,i)=><React.Fragment key={s}>{i>0&&<br/>}{s}</React.Fragment>)}</h2><p className="contact-text">{t.contactText}</p><div className="hero-actions"><a className="button button-primary" href="https://wa.me/212784231590" target="_blank" rel="noopener noreferrer">{t.whatsapp}<ArrowUpRight size={17}/></a><a className="button button-ghost" href="mailto:douae.gouanis@etu.uae.ac.ma">{t.email}<Mail size={17}/></a></div><p className="contact-text"><a href="tel:+212784231590">+212 784-231590</a> آ· <a href="mailto:douae.gouanis@etu.uae.ac.ma">douae.gouanis@etu.uae.ac.ma</a></p></div>
      </section>
    </main>
    <footer className="footer section-wrap"><a className="brand" href="#home"><span className="brand-mark">D</span><span>DOUAE<span className="brand-dot">.</span>DEV</span></a><p>© 2026 GOUANIS Douae</p><a className="to-top" href="#home" aria-label={t.top}><ArrowUpRight size={18}/></a></footer>

    {active && <div className="modal-backdrop" role="dialog" aria-modal="true" aria-label={active.name} onMouseDown={e => {if(e.target===e.currentTarget)setActiveProject(null)}}>
      <div className="project-modal"><div className="modal-header"><div><p className="eyebrow">{t.projectDetails} / {active.number}</p><h2>{active.name}</h2></div><button className="modal-close" onClick={() => setActiveProject(null)} aria-label={t.close}><X/></button></div>
        <p className="modal-description">{projectDescription(active)}</p><p className="modal-tech-label">{t.technologies}</p><div className="project-tech modal-tech">{active.tech.map(x=><span key={x}>{x}</span>)}</div>
        {active.id === 'fraude' ? (
  <div className="project-explanation" style={{
    display: 'grid',
    gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
    gap: '16px',
    padding: '24px 0'
  }}>
    <div>
      <h3>Objectif du projet</h3>
      <p>Détecter les comportements suspects pendant les examens à l’aide de l’intelligence artificielle.</p>
    </div>
    <div>
      <h3>Fonctionnement</h3>
      <p>Analyser les comportements observés, repérer les anomalies et signaler les situations qui nécessitent une vérification.</p>
    </div>
    <div>
      <h3>Technologies</h3>
      <p>Intelligence artificielle et analyse de comportements.</p>
    </div>
    <div>
      <h3>Résultat attendu</h3>
      <p>Aider à repérer les situations inhabituelles et à renforcer l’intégrité des examens.</p>
    </div>
  </div>
) : active.screenshots.length ? (
  <><div className="gallery-main"><img src={active.screenshots[activeImage].src} alt={active.screenshots[activeImage].alt}/><button className="gallery-arrow prev" onClick={() => setActiveImage(i => (i-1+active.screenshots.length)%active.screenshots.length)} aria-label="Previous image">‹</button><button className="gallery-arrow next" onClick={() => setActiveImage(i => (i+1)%active.screenshots.length)} aria-label="Next image">›</button><span className="gallery-counter">{String(activeImage+1).padStart(2,'0')} / {String(active.screenshots.length).padStart(2,'0')}</span></div><div className="gallery-thumbs">{active.screenshots.map((s,i)=><button className={i===activeImage?'selected':''} key={s.src} onClick={() => setActiveImage(i)}><img src={s.src} alt={s.alt}/></button>)}</div></>
) : (
  <div className="gallery-placeholder"><MonitorSmartphone size={28}/><p>{t.galleryEmpty}</p></div>
)}
      </div>
    </div>}
  </div>
}

createRoot(document.getElementById('root')).render(<App />)