// Experience, Projects (with filter + modal), Skills (with bars), Education, Certifications, Languages, Now, Testimonials, Contact, Footer

const { useState: useState2, useEffect: useEffect2, useRef: useRef2, useMemo: useMemo2 } = React;

// =========================================================
// Experience
// =========================================================
function Experience({ data, lang, ui }) {
  return (
    <section className="sec" id="experience">
      <SectionHead num="02" tag={ui.sections.experience} title={lang === "fr" ? "Expérience" : "Experience"} subtitle={lang === "fr" ? "Là où la théorie rencontre la production." : "Where theory meets production."} />
      <div className="exp-list">
        {data.experience.map((e, i) => (
          <Reveal key={e.id} delay={i * 80}>
            <article className="exp-card">
              <div className="exp-period">
                <span className="pill">{e.type}</span>
                <span>{e.period[lang]}</span>
              </div>
              <div className="exp-body">
                <h3>{e.role[lang]}</h3>
                <div className="company">{e.company}</div>
                <p className="summary">{e.summary[lang]}</p>
                <ul>
                  {e.bullets[lang].map((b, j) => <li key={j}>{b}</li>)}
                </ul>
              </div>
              <div className="exp-stack">
                {e.stack.map(s => <span className="tech-chip" key={s}>{s}</span>)}
              </div>
            </article>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// =========================================================
// Projects
// =========================================================
function Projects({ data, lang, ui }) {
  const [filter, setFilter] = useState2("All");
  const [openId, setOpenId] = useState2(null);

  const allTags = useMemo2(() => {
    const s = new Set();
    data.projects.forEach(p => p.tags?.forEach(t => s.add(t)));
    return ["All", ...Array.from(s)];
  }, [data.projects]);

  const filtered = useMemo2(() => {
    if (filter === "All") return data.projects;
    return data.projects.filter(p => p.tags?.includes(filter));
  }, [data.projects, filter]);

  // Mouse glow effect
  const onCardMove = (e) => {
    const r = e.currentTarget.getBoundingClientRect();
    e.currentTarget.style.setProperty("--mx", (e.clientX - r.left) + "px");
    e.currentTarget.style.setProperty("--my", (e.clientY - r.top) + "px");
  };

  const open = data.projects.find(p => p.id === openId);

  return (
    <section className="sec" id="projects">
      <SectionHead num="03" tag={ui.sections.projects} title={lang === "fr" ? "Projets sélectionnés" : "Selected projects"} subtitle={lang === "fr" ? "Cliquez sur une carte pour ouvrir l'étude de cas." : "Click any card to open the case study."} />

      <Reveal>
        <div className="proj-filters">
          <span className="filter-label">{ui.labels.filter}</span>
          {allTags.map(t => (
            <button
              key={t}
              className={`tech-chip ${filter === t ? "active" : ""}`}
              onClick={() => setFilter(t)}
            >
              {t === "All" ? ui.labels.all : t}
            </button>
          ))}
        </div>
      </Reveal>

      <div className="proj-grid">
        {filtered.map((p, i) => (
          <Reveal key={p.id} delay={i * 60} as="article" className={`proj-card ${p.featured ? "featured" : ""}`}>
            <div
              onMouseMove={onCardMove}
              onClick={() => setOpenId(p.id)}
              style={{ display: "contents" }}
            >
              <div className="proj-head">
                <div className="proj-id">PRJ.{String(i + 1).padStart(2, "0")}</div>
                {p.metric && (
                  <div className="proj-metric">
                    <span className="v">{p.metric.value}</span>
                    <span>{p.metric.label[lang]}</span>
                  </div>
                )}
              </div>
              <div>
                <h3 className="proj-name">{p.name}</h3>
                <p className="proj-tagline">{p.tagline[lang]}</p>
              </div>
              <div className="proj-stack">
                {p.stack.map(s => <span className="tech-chip" key={s}>{s}</span>)}
              </div>
              {p.featured && (
                <div className="proj-extra">
                  {p.role && <div><span>ROLE</span><span>{p.role[lang]}</span></div>}
                  {p.link && <div><span>LIVE</span><span>{p.link}</span></div>}
                </div>
              )}
              <div className="proj-cta">{ui.labels.readMore} →</div>
            </div>
          </Reveal>
        ))}
      </div>

      {open && <ProjectModal project={open} lang={lang} ui={ui} onClose={() => setOpenId(null)} />}
    </section>
  );
}

function ProjectModal({ project, lang, ui, onClose }) {
  useEffect2(() => {
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    window.addEventListener("keydown", onKey);
    document.body.style.overflow = "hidden";
    return () => { window.removeEventListener("keydown", onKey); document.body.style.overflow = ""; };
  }, [onClose]);
  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <div className="modal-head">
          <div>
            <h3 className="modal-name">{project.name}</h3>
            <p className="modal-tagline">{project.tagline[lang]}</p>
          </div>
          <button className="modal-close" onClick={onClose} aria-label={ui.labels.close}>✕</button>
        </div>
        <div className="modal-body">
          <div className="modal-section">
            <h4>{lang === "fr" ? "Vue d'ensemble" : "Overview"}</h4>
            <p>{project.description[lang]}</p>
          </div>
          <div className="modal-section">
            <h4>{ui.labels.highlights}</h4>
            <ul>
              {project.highlights[lang].map((h, i) => <li key={i}>{h}</li>)}
            </ul>
          </div>
          <div className="modal-section">
            <h4>{ui.labels.techStack}</h4>
            <div className="modal-stack">
              {project.stack.map(s => <span className="tech-chip" key={s}>{s}</span>)}
            </div>
          </div>
          {project.link && (
            <div className="modal-section">
              <h4>LIVE</h4>
              <p><a href={`https://${project.link}`} target="_blank" rel="noopener" className="mono">{project.link} ↗</a></p>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

// =========================================================
// Skills
// =========================================================
function SkillBar({ name, level }) {
  const ref = useRef2(null);
  const [w, setW] = useState2(0);
  useEffect2(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) { setTimeout(() => setW(level), 80); io.unobserve(el); } });
    }, { threshold: 0.4 });
    io.observe(el);
    return () => io.disconnect();
  }, [level]);
  return (
    <div className="skill-row" ref={ref}>
      <span className="name">{name}</span>
      <div className="bar"><div className="bar-fill" style={{ width: `${w}%` }}></div></div>
      <span className="level">{level}</span>
    </div>
  );
}

function Skills({ data, lang, ui }) {
  return (
    <section className="sec" id="skills">
      <SectionHead num="04" tag={ui.sections.skills} title={lang === "fr" ? "Stack technique" : "Tech stack"} subtitle={lang === "fr" ? "Niveaux auto-évalués · scrollez pour animer." : "Self-assessed levels · scroll to animate."} />
      <div className="skills-grid">
        {data.skills.map((cat, i) => (
          <Reveal key={i} delay={i * 60}>
            <div className="skills-cat">
              <h4>{cat.category[lang]} <span className="count">{String(cat.items.length).padStart(2, "0")}</span></h4>
              {cat.items.map(it => <SkillBar key={it.name} name={it.name} level={it.level} />)}
            </div>
          </Reveal>
        ))}
      </div>

      <Reveal delay={200}>
        <div className="chip-row">
          <span className="chip-label">{lang === "fr" ? "Design Patterns" : "Design Patterns"}</span>
          {data.designPatterns.map(p => <span className="tech-chip" key={p}>{p}</span>)}
        </div>
      </Reveal>
      <Reveal delay={260}>
        <div className="chip-row">
          <span className="chip-label">{lang === "fr" ? "Méthodologies" : "Methodologies"}</span>
          {data.methodologies.map(p => <span className="tech-chip" key={p}>{p}</span>)}
        </div>
      </Reveal>
    </section>
  );
}

// =========================================================
// Education
// =========================================================
function Education({ data, lang, ui }) {
  return (
    <section className="sec" id="education">
      <SectionHead num="05" tag={ui.sections.education} title={lang === "fr" ? "Formation" : "Education"} subtitle={lang === "fr" ? "De la prépa à l'école d'ingénieur." : "From CPGE to engineering school."} />
      <div className="edu-list">
        {data.education.map((e, i) => (
          <Reveal key={i} delay={i * 80}>
            <div className={`edu-row ${e.current ? "current" : ""}`}>
              <div className="edu-period">{e.period[lang]}</div>
              <h3 className="edu-degree">{e.degree[lang]}</h3>
              <div className="edu-school">{e.school}</div>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// =========================================================
// Certifications
// =========================================================
function Certifications({ data, lang, ui }) {
  return (
    <section className="sec" id="certs">
      <SectionHead num="06" tag={ui.sections.certifications} title={lang === "fr" ? "Certifications" : "Certifications"} subtitle={lang === "fr" ? "Apprentissage continu — formel et auto-dirigé." : "Continuous learning — formal and self-directed."} />
      <div className="certs-grid">
        {data.certifications.map((c, i) => (
          <Reveal key={i} delay={i * 50}>
            <div className="cert-card">
              <div className="head">
                <span>CRT.{String(i + 1).padStart(2, "0")}</span>
                <span>{c.year}</span>
              </div>
              <div className="name">{c.name}</div>
              <div className="issuer">{c.issuer}</div>
              {c.status && <div className="status">{c.status[lang]}</div>}
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// =========================================================
// Languages
// =========================================================
function LanguageCard({ name, level, percent, delay }) {
  const ref = useRef2(null);
  const [filled, setFilled] = useState2(0);
  useEffect2(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) {
          const target = Math.round(percent / 5);
          let n = 0;
          const id = setInterval(() => {
            n++;
            setFilled(n);
            if (n >= target) clearInterval(id);
          }, 60);
          io.unobserve(el);
        }
      });
    }, { threshold: 0.3 });
    io.observe(el);
    return () => io.disconnect();
  }, [percent]);
  return (
    <Reveal delay={delay}>
      <div className="lang-card" ref={ref}>
        <div className="lang-name">{name}</div>
        <div className="lang-level">{level}</div>
        <div className="lang-bar">
          {Array.from({ length: 20 }).map((_, i) => <div key={i} className={i < filled ? "on" : ""}></div>)}
        </div>
      </div>
    </Reveal>
  );
}

function Languages({ data, lang, ui }) {
  return (
    <section className="sec" id="languages">
      <SectionHead num="07" tag={ui.sections.languages} title={lang === "fr" ? "Langues" : "Languages"} subtitle={lang === "fr" ? "Trilingue · à l'aise en environnement international." : "Trilingual · comfortable in international settings."} />
      <div className="lang-grid">
        {data.languages.map((l, i) => (
          <LanguageCard key={i} name={l.name[lang]} level={l.level[lang]} percent={l.percent} delay={i * 100} />
        ))}
      </div>
    </section>
  );
}

// =========================================================
// Now — bento layout, focused & beautiful
// =========================================================
function NowSection({ data, lang, ui }) {
  const dateStr = new Date().toLocaleDateString(lang === "fr" ? "fr-FR" : "en-GB", { month: "long", year: "numeric" });
  const items = data.now;
  return (
    <section className="sec" id="now">
      <SectionHead num="08" tag={ui.sections.now} title={lang === "fr" ? "En ce moment" : "Right now"} subtitle={lang === "fr" ? "Mis à jour mensuellement · ce qui m'occupe en ce moment." : "Updated monthly · what's on my desk right now."} />
      <Reveal>
        <div className="now-banner">
          <div className="now-banner-left">
            <span className="now-banner-pulse"></span>
            <span className="now-banner-eyebrow">{lang === "fr" ? "DERNIÈRE MISE À JOUR" : "LAST UPDATED"}</span>
            <span className="now-banner-date">{dateStr}</span>
          </div>
          <div className="now-banner-right">
            <div className="now-meta-pill"><span>STATUS</span><b>{lang === "fr" ? "ACTIF" : "ACTIVE"}</b></div>
            <div className="now-meta-pill"><span>FREQ</span><b>{lang === "fr" ? "MENSUEL" : "MONTHLY"}</b></div>
            <div className="now-meta-pill"><span>SIGNAL</span><b>●●●●○</b></div>
          </div>
        </div>
        <div className="now-cards">
          {items.map((it, i) => (
            <div key={i} className={`now-card-v2 kind-${it.kind}`} style={{animationDelay: `${i * 80}ms`}}>
              <div className="now-card-head">
                <span className="now-card-icon">{it.icon}</span>
                <span className="now-card-tag">{it.tag[lang]}</span>
                <span className="now-card-id">N{String(i + 1).padStart(2, "0")}</span>
              </div>
              <h3 className="now-card-title">{it.title[lang]}</h3>
              <p className="now-card-detail">{it.detail[lang]}</p>
              {typeof it.progress === "number" && (
                <div className="now-card-progress">
                  <div className="now-card-bar"><div className="now-card-fill" style={{width: `${it.progress}%`}}></div></div>
                  <span>{it.progress}%</span>
                </div>
              )}
              <div className="now-card-corner"></div>
            </div>
          ))}
        </div>
      </Reveal>
    </section>
  );
}

// =========================================================
// Testimonials
// =========================================================
function Testimonials({ data, lang, ui }) {
  return (
    <section className="sec" id="testimonials">
      <SectionHead num="09" tag={ui.sections.testimonials} title={lang === "fr" ? "Références" : "References"} subtitle={lang === "fr" ? "Ce qu'on dit de moi." : "What others say."} />
      <div className="testim-grid">
        {data.testimonials.map((t, i) => (
          <Reveal key={i} delay={i * 80}>
            <div className="testim-card">
              <div className="mark">"</div>
              <blockquote>{t.quote[lang]}</blockquote>
              <footer><strong>{t.author}</strong> · {t.org}</footer>
            </div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// =========================================================
// Contact (with real form — backend stub ready)
// =========================================================
function ContactForm({ data, lang, ui }) {
  const [form, setForm] = useState2({ name: "", email: "", subject: "", message: "" });
  const [status, setStatus] = useState2("idle"); // idle | sending | sent | error
  const [errors, setErrors] = useState2({});

  const labels = lang === "fr"
    ? { name: "Votre nom", email: "Votre email", subject: "Sujet", message: "Message", send: "Envoyer le message", sending: "Envoi…", sent: "Message envoyé · merci !", error: "Une erreur est survenue. Réessayez ou écrivez-moi directement.", required: "Champ requis", invalidEmail: "Email invalide", placeholder_msg: "Bonjour Ayoub, je vous contacte au sujet de…" }
    : { name: "Your name", email: "Your email", subject: "Subject", message: "Message", send: "Send message", sending: "Sending…", sent: "Message sent · thank you!", error: "Something went wrong. Try again or email me directly.", required: "Required", invalidEmail: "Invalid email", placeholder_msg: "Hi Ayoub, I'm reaching out about…" };

  const validate = () => {
    const e = {};
    if (!form.name.trim()) e.name = labels.required;
    if (!form.email.trim()) e.email = labels.required;
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(form.email)) e.email = labels.invalidEmail;
    if (!form.message.trim()) e.message = labels.required;
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const submit = async (ev) => {
    ev.preventDefault();
    if (!validate()) return;
    setStatus("sending");

    // Backend hook — replace `endpoint` with your real API URL when ready.
    // The contract: POST JSON {name, email, subject, message} → 200 OK.
    const endpoint = window.PORTFOLIO_CONTACT_ENDPOINT || ""; // e.g. "https://api.your-host.com/contact"
    try {
      if (endpoint) {
        const res = await fetch(endpoint, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify(form),
        });
        if (!res.ok) throw new Error("HTTP " + res.status);
      } else {
        // No backend wired yet — fall back to mailto so the message is never lost.
        const body = encodeURIComponent(`From: ${form.name} <${form.email}>\n\n${form.message}`);
        const subj = encodeURIComponent(form.subject || (lang === "fr" ? "Contact via portfolio" : "Portfolio contact"));
        window.location.href = `mailto:${data.meta.email}?subject=${subj}&body=${body}`;
        await new Promise(r => setTimeout(r, 600));
      }
      setStatus("sent");
      setForm({ name: "", email: "", subject: "", message: "" });
    } catch (err) {
      console.error(err);
      setStatus("error");
    }
  };

  const upd = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  return (
    <form className="contact-form" onSubmit={submit} noValidate>
      <div className="cf-grid">
        <label className={`cf-field ${errors.name ? "err" : ""}`}>
          <span className="cf-label">{labels.name}{errors.name && <em> · {errors.name}</em>}</span>
          <input type="text" value={form.name} onChange={upd("name")} autoComplete="name" />
        </label>
        <label className={`cf-field ${errors.email ? "err" : ""}`}>
          <span className="cf-label">{labels.email}{errors.email && <em> · {errors.email}</em>}</span>
          <input type="email" value={form.email} onChange={upd("email")} autoComplete="email" />
        </label>
      </div>
      <label className="cf-field">
        <span className="cf-label">{labels.subject}</span>
        <input type="text" value={form.subject} onChange={upd("subject")} />
      </label>
      <label className={`cf-field ${errors.message ? "err" : ""}`}>
        <span className="cf-label">{labels.message}{errors.message && <em> · {errors.message}</em>}</span>
        <textarea rows={5} value={form.message} onChange={upd("message")} placeholder={labels.placeholder_msg} />
      </label>
      <div className="cf-actions">
        <button type="submit" className="btn btn-primary" disabled={status === "sending"}>
          {status === "sending" ? labels.sending : labels.send} {status !== "sending" && <span className="btn-arrow">→</span>}
        </button>
        {status === "sent"  && <span className="cf-status ok">✓ {labels.sent}</span>}
        {status === "error" && <span className="cf-status err">✕ {labels.error}</span>}
      </div>
    </form>
  );
}

function Contact({ data, lang, ui }) {
  const [copied, setCopied] = useState2(false);
  const copy = () => {
    navigator.clipboard.writeText(data.meta.email).then(() => {
      setCopied(true);
      setTimeout(() => setCopied(false), 1400);
    });
  };
  return (
    <section className="sec" id="contact">
      <SectionHead num="10" tag={ui.sections.contact} title={lang === "fr" ? "Travaillons ensemble" : "Let's build together"} />
      <div className="contact-grid">
        <Reveal>
          <div>
            <h2 className="contact-headline">
              {lang === "fr" ? (<>Une <em>opportunité</em>,<br/>un <span className="accent">projet</span>,<br/>ou juste un <em>café</em> ?</>)
                            : (<>An <em>opportunity</em>,<br/>a <span className="accent">project</span>,<br/>or just <em>coffee</em>?</>)}
            </h2>
            <p className="contact-intro">
              {lang === "fr"
                ? "Écrivez-moi un mot ci-dessous — je réponds en moins de 24h."
                : "Drop me a note below — I reply within 24 hours."}
            </p>
            <ContactForm data={data} lang={lang} ui={ui} />
            <div className="contact-actions">
              <a className="btn" href={`mailto:${data.meta.email}`}>✉ {data.meta.email}</a>
              <a className="btn" href={`https://${data.meta.linkedin}`} target="_blank" rel="noopener">LinkedIn ↗</a>
              <a className="btn" href={`https://${data.meta.github}`} target="_blank" rel="noopener">GitHub ↗</a>
              <a className="btn" href="uploads/Ayoub-Resume.v4.pdf" target="_blank">{ui.labels.downloadResume} ↓</a>
            </div>
          </div>
        </Reveal>
        <Reveal delay={120}>
          <div className="contact-side">
            <div className="row">
              <span className="key">EMAIL</span>
              <span className="val copyable" onClick={copy}>{copied ? `✓ ${ui.labels.copied}` : data.meta.email}</span>
            </div>
            <div className="row">
              <span className="key">GITHUB</span>
              <span className="val">{data.meta.github}</span>
            </div>
            <div className="row">
              <span className="key">LINKEDIN</span>
              <span className="val">{data.meta.linkedin}</span>
            </div>
            <div className="row">
              <span className="key">{ui.labels.location}</span>
              <span className="val">{lang === "fr" ? data.meta.locationFr : data.meta.location}</span>
            </div>
            <div className="row">
              <span className="key">TIMEZONE</span>
              <span className="val">{data.meta.timezone}</span>
            </div>
            <div className="row">
              <span className="key">RESPONSE</span>
              <span className="val">≤ 24h</span>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Footer({ ui, lang }) {
  return (
    <footer className="footer">
      © 2026 Ayoub Alouane · {ui.footer} · {ui.labels.terminalHint}
    </footer>
  );
}

Object.assign(window, { Experience, Projects, ProjectModal, SkillBar, Skills, Education, Certifications, Languages, LanguageCard, NowSection, Testimonials, Contact, Footer });