import React from 'react'
import { createRoot } from 'react-dom/client'
import {
  ArrowDown,
  ArrowUpRight,
  BriefcaseBusiness,
  Code2,
  Database,
  Download,
  GraduationCap,
  Languages,
  Mail,
  MapPin,
  Phone,
  Sparkles,
  Workflow,
} from 'lucide-react'
import './styles.css'

const experience = [
  {
    role: 'Data Scientist & Business Analyst',
    company: 'CERIU',
    place: 'Montréal, Canada',
    period: '2024 — Present',
    bullets: [
      'Model, optimize, and automate analytical production processes.',
      'Design structured deployment frameworks covering verification, testing, validation, and user support.',
      'Develop predictive models at Québec scale using water-asset history from more than 800 municipalities.',
    ],
  },
  {
    role: 'Techno-functional Consultant',
    company: 'Kazacube',
    place: 'Casablanca, Morocco',
    period: '2022 — 2023',
    bullets: [
      'Translated logistics and production requirements into OpenProd and Odoo ERP solutions.',
      'Customized systems with Python, XML, SQL, and Jaspersoft and supported deployment.',
    ],
  },
  {
    role: 'ServiceNow Consultant Intern',
    company: 'DXC Technology',
    place: 'Technopolis Rabat, Morocco',
    period: '2022',
    bullets: ['Modified ServiceNow instances and developed operational workflows.'],
  },
]

const skills = [
  {
    icon: Database,
    title: 'Data & BI',
    text: 'Data quality, data governance, scientific data analysis, advanced Excel, Power BI, Visio, Lucidchart',
  },
  {
    icon: Code2,
    title: 'Programming & AI',
    text: 'Python, SQL, JavaScript, HTML, GitHub, machine learning, LLM-based agents, Codex',
  },
  {
    icon: Workflow,
    title: 'Optimization',
    text: 'Supply chain optimization, mathematical modeling, process design, Microsoft Project',
  },
  {
    icon: BriefcaseBusiness,
    title: 'ERP & Systems',
    text: 'SAP, Odoo, OpenProd, ServiceNow',
  },
]

function App() {
  return (
    <div className="site-shell">
      <header className="nav-wrap">
        <a className="brand" href="#top" aria-label="Mohamed Sabri home">
          MS<span>.</span>
        </a>

        <nav aria-label="Main navigation">
          <a href="#ventures">Ventures</a>
          <a href="#experience">Experience</a>
          <a href="#work">Work</a>
          <a href="#contact">Contact</a>
        </nav>

        <a className="nav-cta" href="/Mohamed-Sabri-2026.pdf" download>
          CV <Download size={15} />
        </a>
      </header>

      <main>
        <section className="hero" id="top">
          <div className="hero-glow hero-glow-one" />
          <div className="hero-glow hero-glow-two" />

          <div className="hero-copy">
            <p className="eyebrow">MONTRÉAL · DATA · BUSINESS · BUILDING</p>
            <h1>
              Mohamed <span>Sabri</span>
            </h1>
            <p className="hero-role">M.Eng. · Data Scientist & Business Analyst</p>
            <p className="hero-text">
              Industrial engineer turning complex data, operational problems, and ambitious ideas into systems that work in the real world.
            </p>

            <div className="founder-chips" aria-label="Founder roles">
              <span>Founder · Kairos</span>
              <span>Founder · DBD</span>
            </div>

            <div className="hero-actions">
              <a className="button primary" href="#ventures">
                See what I’m building <ArrowDown size={17} />
              </a>
              <a className="button secondary" href="mailto:mohamedsabri256@gmail.com">
                Let’s talk <ArrowUpRight size={16} />
              </a>
            </div>

            <div className="hero-meta">
              <span>
                <MapPin size={16} /> Montréal, QC
              </span>
              <span>
                <Languages size={16} /> Français · English · العربية
              </span>
            </div>
          </div>

          <div className="hero-photo-wrap">
            <div className="photo-frame hero-photo">
              <img src="/assets/sabri-suit.jpg" alt="Mohamed Sabri in a suit" />
            </div>
            <div className="float-card">
              <span className="pulse" />
              <div>
                <strong>Building now</strong>
                <small>Kairos · DBD · Agora</small>
              </div>
            </div>
          </div>
        </section>

        <section className="founder-statement">
          <span className="founder-index">01</span>
          <p>
            I work where <strong>technical depth</strong>, <strong>business context</strong>, and <strong>execution</strong> meet.
          </p>
        </section>

        <section className="section ventures" id="ventures">
          <div className="section-heading">
            <p className="eyebrow">FOUNDER MODE</p>
            <h2>Building companies, not just projects.</h2>
          </div>

          <div className="venture-grid">
            <article className="venture-card kairos-card">
              <div className="venture-top">
                <span>01</span>
                <img className="kairos-logo" src="/assets/kairos-logo.svg" alt="Kairos" />
              </div>
              <div className="venture-main">
                <p className="venture-label">FOUNDER</p>
                <h3>Kairos</h3>
                <p className="venture-tag">Booking & workshop operating system</p>
                <p>
                  Kairos is an application used by{' '}
                  <a href="https://kotetbarber.ca" target="_blank" rel="noreferrer">
                    kotetbarber.ca
                  </a>{' '}
                  to manage bookings and the full workshop operation. Montréal market expansion is now in progress.
                </p>
              </div>
              <div className="status-row">
                <span className="dot" /> Conquering Montréal — in progress
              </div>
            </article>

            <article className="venture-card dbd-card">
              <div className="venture-top">
                <span>02</span>
                <div className="dbd-logo-wrap" aria-label="DBD logo">
                  <img src="/assets/dbd-logo.png" alt="DBD — Build Design Deploy" />
                </div>
              </div>
              <div className="venture-main">
                <p className="venture-label">FOUNDER</p>
                <h3>DBD</h3>
                <p className="venture-tag">Build · Design · Deploy</p>
                <p>
                  DBD is an army of builders willing to go full mode on any project. When youth energy and youth power meet wisdom, discipline, and execution, one of the hardest-working forces is born.
                </p>
                <a className="inline-link" href="https://dbdsoldiers.com" target="_blank" rel="noreferrer">
                  dbdsoldiers.com <ArrowUpRight size={14} />
                </a>
              </div>
              <div className="status-row">
                <span className="dot" /> The DBD Agora is still in development
              </div>
            </article>
          </div>
        </section>

        <section className="section split-section" id="experience">
          <div className="section-heading sticky-heading">
            <p className="eyebrow">EXPERIENCE</p>
            <h2>From analysis to deployment.</h2>
            <p>I work across data, operations, business analysis, and technical implementation.</p>
          </div>

          <div className="timeline">
            {experience.map((item) => (
              <article className="timeline-item" key={`${item.role}-${item.company}`}>
                <div className="timeline-dot" />
                <div className="timeline-head">
                  <div>
                    <h3>{item.role}</h3>
                    <p>
                      {item.company} · {item.place}
                    </p>
                  </div>
                  <span>{item.period}</span>
                </div>
                <ul>
                  {item.bullets.map((bullet) => (
                    <li key={bullet}>{bullet}</li>
                  ))}
                </ul>
              </article>
            ))}
          </div>
        </section>

        <section className="graduation-band">
          <div className="grad-photo">
            <img src="/assets/sabri-graduation.jpg" alt="Mohamed Sabri at graduation" />
          </div>
          <div className="grad-copy">
            <GraduationCap size={34} />
            <p className="eyebrow">EDUCATION</p>
            <h2>Industrial engineering, with a builder’s mindset.</h2>

            <div className="degree">
              <strong>Professional Master’s in Industrial Engineering — Value-Added Production</strong>
              <span>Polytechnique Montréal · 2025</span>
            </div>
            <div className="degree">
              <strong>Master’s in Industrial Engineering</strong>
              <span>École nationale des sciences appliquées d’El Jadida · 2022</span>
            </div>
          </div>
        </section>

        <section className="section" id="work">
          <div className="section-heading wide-heading">
            <p className="eyebrow">SELECTED WORK</p>
            <h2>Systems, models, and provincial-scale data.</h2>
          </div>

          <div className="project-grid">
            <article className="project featured-project">
              <span className="project-number">01</span>
              <p className="project-kicker">CERIU · QUÉBEC</p>
              <h3>PIEMQ 2025</h3>
              <p>
                Contributed to the provincial portrait of Québec water infrastructure through municipal-data import, processing, analysis, and final reporting.
              </p>
            </article>

            <article className="project">
              <span className="project-number">02</span>
              <p className="project-kicker">MACHINE LEARNING</p>
              <h3>Theoretical service life</h3>
              <p>
                Analyzed the gap between theoretical and estimated pipe service life and developed ML models to assess the effect on annual investment costs at provincial scale.
              </p>
            </article>
          </div>
        </section>

        <section className="section skills-section">
          <div className="section-heading">
            <p className="eyebrow">TOOLKIT</p>
            <h2>Technical depth. Business context.</h2>
          </div>

          <div className="skills-grid">
            {skills.map(({ icon: Icon, title, text }) => (
              <article className="skill-card" key={title}>
                <Icon size={22} />
                <h3>{title}</h3>
                <p>{text}</p>
              </article>
            ))}
          </div>

          <div className="cert-strip" aria-label="Certifications">
            <span>Microsoft / LinkedIn · Business Analysis</span>
            <span>HackerRank · SQL (Advanced)</span>
            <span>HackerRank · Software Engineer</span>
            <span>Sustainable Supply Chain</span>
          </div>
        </section>

        <section className="contact-section" id="contact">
          <div className="contact-icon">
            <Sparkles size={22} />
          </div>
          <p className="eyebrow">CONTACT</p>
          <h2>
            Have a hard problem?
            <br />
            <span>Build it properly.</span>
          </h2>
          <p className="contact-copy">Data, product, process, automation, or deployment — reach out.</p>
          <div className="contact-actions">
            <a className="button primary light" href="mailto:mohamedsabri256@gmail.com">
              <Mail size={18} /> Email me
            </a>
            <a className="button secondary light-border" href="tel:+14388660069">
              <Phone size={18} /> +1 438 866 0069
            </a>
          </div>
        </section>
      </main>

      <footer>
        <span>© {new Date().getFullYear()} Mohamed Sabri</span>
        <span>Montréal, Québec</span>
      </footer>
    </div>
  )
}

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