// Page « À propos » (#/a-propos, alias #/about). Routée par app.jsx.
// Contenu : COMPANY.md (identité, dates, siège), ACTIVITIES.md / CLIENTS.md
// (origine ShopFromFrance), README (positionnement 3PL + Tempo). Les faits
// juridiques viennent de COMPANY (legal.jsx) - source unique, ne pas dupliquer.
const ABOUT_COPY = {
  fr: {
    docTitle: "À propos - Shoptimize",
    hero: {
      eyebrow: "À propos",
      title: "Une logistique française,",
      titleEm: "pensée pour ceux qui vendent loin.",
      lead: "Shoptimize est un prestataire logistique indépendant (3PL) installé dans la métropole lilloise. Nous réceptionnons, stockons, préparons et expédions les commandes de marques e-commerce qui vendent en Europe, où qu'elles soient basées dans le monde.",
      cta1: "Demander un devis",
      cta2: "Voir nos services",
    },
    story: {
      eyebrow: "Notre histoire",
      title: "Née d'un colis",
      titleEm: "qui ne pouvait pas partir.",
      paragraphs: [
        "Shoptimize a démarré fin 2025 avec une idée simple : permettre à des particuliers installés à l'étranger d'acheter en France sans se heurter aux adresses de livraison refusées, aux cartes bancaires bloquées et aux frais d'envoi opaques. C'est le service ShopFromFrance : une adresse en France, une réception photographiée, un colis reconditionné puis réexpédié vers plus de 50 pays.",
        "En opérant ces flux au quotidien, nous avons construit un vrai métier d'entrepôt : contrôler, photographier, reconditionner, consolider, remettre au bon transporteur. Et nous avons vu la question inverse arriver de plus en plus souvent : des marques établies hors de France, parfois hors d'Europe, qui voulaient vendre à des clients européens sans y avoir ni stock ni équipe.",
        "Nous leur avons ouvert notre entrepôt. Aujourd'hui, Shoptimize est un prestataire 3PL : votre stock est en France, vos commandes partent vers les 27 pays de l'Union européenne, et vous pilotez tout depuis Tempo, le logiciel que nous avons développé nous-mêmes pour nos opérations.",
      ],
      imageAlt: "Entrepôt Shoptimize",
    },
    stats: [
      { kpi: "2025", label: "Année de création" },
      { kpi: "27", label: "Pays de l'UE livrés" },
      { kpi: "50+", label: "Pays desservis à l'international" },
      { kpi: "24h", label: "Réponse à toute demande" },
    ],
    values: {
      eyebrow: "Ce en quoi nous croyons",
      title: "Petite structure,",
      titleEm: "grandes exigences.",
      sub: "Nous ne sommes pas une plateforme anonyme derrière un ticket de support. Vous savez qui manipule vos produits, et vous pouvez l'appeler.",
      points: [
        { n: "01", title: "La preuve plutôt que la promesse", body: "Chaque réception et chaque retour sont photographiés et documentés dans Tempo. Vous n'avez pas à nous croire sur parole : vous voyez." },
        { n: "02", title: "Un interlocuteur, pas un guichet", body: "Un contact dédié en France, joignable par téléphone, qui connaît vos produits et vos protocoles. Les cas particuliers se règlent en discutant, pas en ouvrant un ticket." },
        { n: "03", title: "Le sur-mesure comme standard", body: "Box, kit, coffret, façonnage, assemblage : nous validons un protocole avec vous, puis nous l'appliquons à la lettre. Ce qui est spécifique chez vous n'est pas un problème chez nous." },
        { n: "04", title: "Nos outils, notre code", body: "Tempo, notre WMS, est développé en interne. Quand une fonctionnalité vous manque, nous ne dépendons pas d'un éditeur tiers pour l'ajouter." },
      ],
    },
    timeline: {
      eyebrow: "Étapes",
      title: "Jusqu'ici,",
      titleEm: "et ensuite.",
      items: [
        { date: "Nov. 2025", title: "Premiers colis", body: "Début de l'activité à Villeneuve-d'Ascq avec la réexpédition internationale pour particuliers, sous la marque ShopFromFrance." },
        { date: "Déc. 2025", title: "SHOPTIMIZE SAS", body: "Immatriculation de la société au RCS de Lille Métropole. Activité : entreposage et stockage." },
        { date: "2026", title: "Tempo", body: "Mise en service de notre WMS maison : réception, façonnage, stock et expédition tracés par lot, avec un portail temps réel pour nos clients." },
        { date: "2026", title: "Offre 3PL", body: "Ouverture de l'entrepôt aux marques e-commerce : réception, stockage, pick & pack, retours et expédition vers toute l'Union européenne." },
        { date: "À venir", title: "Nous grandissons avec vous", body: "Nouvelles connexions boutiques et transporteurs, montée en capacité de l'entrepôt, renfort de l'équipe : au rythme de nos clients, pas plus vite." },
      ],
    },
    where: {
      eyebrow: "Où nous sommes",
      title: "Lille Métropole,",
      titleEm: "au carrefour de l'Europe.",
      body: "Notre entrepôt est à Villeneuve-d'Ascq, aux portes de Lille. À une heure de Paris, trente-cinq minutes de Bruxelles, une heure et demie de Londres et à proximité des hubs des grands transporteurs, c'est l'un des meilleurs emplacements d'Europe pour livrer vite le Benelux, l'Allemagne, le Royaume-Uni et l'ensemble du territoire français.",
      imageAlt: "Contrôle des colis à l'entrepôt",
      idTitle: "Carte d'identité",
      id: [
        ["Société", "SHOPTIMIZE SAS, au capital de 1 000 €"],
        ["Dirigeant", "Lyes Chikhi, fondateur et président"],
        ["Siège & entrepôt", "43 rue Jacques Prévert, 59650 Villeneuve-d'Ascq, France"],
        ["Immatriculation", "RCS Lille Métropole 993 799 741"],
        ["Activité", "Entreposage et stockage (NAF 5210B)"],
        ["Contact", "contact@shoptimize.global · +33 6 51 57 37 51"],
      ],
      legalLink: "Mentions légales complètes",
    },
  },
  en: {
    docTitle: "About - Shoptimize",
    hero: {
      eyebrow: "About",
      title: "French logistics,",
      titleEm: "built for those who sell far from home.",
      lead: "Shoptimize is an independent third-party logistics provider (3PL) based in the Lille metropolitan area, France. We receive, store, pack and ship the orders of e-commerce brands selling across Europe, wherever in the world they are based.",
      cta1: "Request a quote",
      cta2: "See our services",
    },
    story: {
      eyebrow: "Our story",
      title: "Born from a parcel",
      titleEm: "that couldn't ship.",
      paragraphs: [
        "Shoptimize started in late 2025 with a simple idea: let people living abroad buy from France without running into rejected delivery addresses, blocked bank cards and opaque shipping fees. That is the ShopFromFrance service: a French address, a photographed receipt, a repacked parcel forwarded to more than 50 countries.",
        "Running those flows every day, we built a real warehouse trade: inspecting, photographing, repacking, consolidating, handing over to the right carrier. And we saw the reverse question come up more and more often: brands established outside France, sometimes outside Europe, that wanted to sell to European customers without having stock or a team there.",
        "So we opened our warehouse to them. Today, Shoptimize is a 3PL provider: your stock sits in France, your orders ship to all 27 EU countries, and you run everything from Tempo, the software we built ourselves for our own operations.",
      ],
      imageAlt: "Shoptimize warehouse",
    },
    stats: [
      { kpi: "2025", label: "Founded" },
      { kpi: "27", label: "EU countries delivered" },
      { kpi: "50+", label: "Countries served worldwide" },
      { kpi: "24h", label: "Reply to every request" },
    ],
    values: {
      eyebrow: "What we believe",
      title: "Small team,",
      titleEm: "high standards.",
      sub: "We are not an anonymous platform behind a support ticket. You know who handles your products, and you can call them.",
      points: [
        { n: "01", title: "Proof over promises", body: "Every receipt and every return is photographed and documented in Tempo. You don't have to take our word for it: you can see it." },
        { n: "02", title: "A contact, not a counter", body: "A dedicated contact in France, reachable by phone, who knows your products and your protocols. Edge cases get solved by talking, not by opening a ticket." },
        { n: "03", title: "Custom work as the default", body: "Box, kit, gift set, finishing, assembly: we validate a protocol with you, then follow it to the letter. What is specific about your business is not a problem for ours." },
        { n: "04", title: "Our tools, our code", body: "Tempo, our WMS, is built in-house. When you're missing a feature, we don't depend on a third-party vendor to add it." },
      ],
    },
    timeline: {
      eyebrow: "Milestones",
      title: "So far,",
      titleEm: "and what's next.",
      items: [
        { date: "Nov 2025", title: "First parcels", body: "Operations begin in Villeneuve-d'Ascq with international parcel forwarding for individuals, under the ShopFromFrance brand." },
        { date: "Dec 2025", title: "SHOPTIMIZE SAS", body: "The company is registered with the Lille Métropole Trade and Companies Register. Activity: warehousing and storage." },
        { date: "2026", title: "Tempo", body: "Our in-house WMS goes live: receiving, finishing, stock and shipping tracked by batch, with a real-time portal for our clients." },
        { date: "2026", title: "3PL offer", body: "The warehouse opens to e-commerce brands: receiving, storage, pick & pack, returns and shipping across the whole European Union." },
        { date: "Next", title: "Growing with you", body: "New store and carrier connections, more warehouse capacity, a bigger team: at our clients' pace, not faster." },
      ],
    },
    where: {
      eyebrow: "Where we are",
      title: "Lille Métropole,",
      titleEm: "at the crossroads of Europe.",
      body: "Our warehouse is in Villeneuve-d'Ascq, on the outskirts of Lille. One hour from Paris, thirty-five minutes from Brussels, an hour and a half from London and close to the major carriers' hubs, it is one of the best locations in Europe for fast delivery to Benelux, Germany, the United Kingdom and all of France.",
      imageAlt: "Parcel inspection at the warehouse",
      idTitle: "Company profile",
      id: [
        ["Company", "SHOPTIMIZE SAS, share capital €1,000"],
        ["Director", "Lyes Chikhi, founder and President"],
        ["Head office & warehouse", "43 rue Jacques Prévert, 59650 Villeneuve-d'Ascq, France"],
        ["Registration", "Lille Métropole RCS 993 799 741"],
        ["Activity", "Warehousing and storage (NAF 5210B)"],
        ["Contact", "contact@shoptimize.global · +33 6 51 57 37 51"],
      ],
      legalLink: "Full legal notice",
    },
  },
};

const ABOUT_ROUTES = ["a-propos", "about"];

const AboutHeading = ({ eyebrow, title, titleEm, onDark, size = "clamp(32px, 3.6vw, 48px)", style }) => (
  <div style={style}>
    {eyebrow && <div className="mono" style={{ color: onDark ? "var(--on-dark-muted)" : "var(--muted)", marginBottom: 16 }}>{eyebrow}</div>}
    <h2 style={{ fontSize: size, color: onDark ? "#fff" : "var(--fg)" }}>
      {title}<br/><em className="h-italic" style={{ fontStyle: "italic", color: "var(--accent)" }}>{titleEm}</em>
    </h2>
  </div>
);

const AboutPage = ({ t, lang }) => {
  const c = ABOUT_COPY[lang] || ABOUT_COPY.fr;

  React.useEffect(() => {
    const prev = document.title;
    document.title = c.docTitle;
    return () => { document.title = prev; };
  }, [c.docTitle]);

  const link = { color: "var(--accent-2)", textDecoration: "underline", textUnderlineOffset: 3, fontWeight: 500 };

  return (
    <main>
      {/* HERO - texte seul, large, même rythme que la home */}
      <section style={{ padding: "72px 0 64px", background: "var(--bg)" }}>
        <div className="wrap">
          <div className="mono" style={{ color: "var(--muted)", marginBottom: 18 }}>{c.hero.eyebrow}</div>
          <h1 style={{ fontSize: "clamp(38px, 5vw, 70px)", maxWidth: 900, marginBottom: 24, lineHeight: 1.02 }}>
            {c.hero.title}<br/>
            <em className="h-italic" style={{ fontStyle: "italic", color: "var(--accent)" }}>{c.hero.titleEm}</em>
          </h1>
          <p style={{ maxWidth: 680, fontSize: 17, color: "var(--muted)", lineHeight: 1.6, margin: "0 0 28px" }}>{c.hero.lead}</p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a href="#contact" className="btn btn-primary">{c.hero.cta1} <IconArrow size={14}/></a>
            <a href="#services" className="btn btn-outline">{c.hero.cta2}</a>
          </div>
        </div>
      </section>

      {/* STORY - photo à gauche, récit à droite */}
      <section className="section">
        <div className="wrap">
          <div className="grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1.1fr", gap: "40px 64px", alignItems: "center" }}>
            <div style={{ position: "relative" }}>
              <div style={{ aspectRatio: "4/5", backgroundImage: "url(assets/img-warehouse-exterior.jpg)", backgroundSize: "cover", backgroundPosition: "center", borderRadius: "var(--radius)", border: "1px solid var(--line)" }} role="img" aria-label={c.story.imageAlt}/>
              <div aria-hidden style={{ position: "absolute", left: -1, bottom: -1, width: 120, height: 120, borderLeft: "2px solid var(--accent)", borderBottom: "2px solid var(--accent)", pointerEvents: "none" }}/>
            </div>
            <div>
              <AboutHeading eyebrow={c.story.eyebrow} title={c.story.title} titleEm={c.story.titleEm} style={{ marginBottom: 24 }}/>
              {c.story.paragraphs.map((p, i) => (
                <p key={i} style={{ color: i === 0 ? "var(--fg)" : "var(--fg-2)", fontSize: i === 0 ? 16.5 : 15, lineHeight: 1.65, margin: "0 0 16px" }}>{p}</p>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* STATS - bande crème, chiffres Geist */}
      <section style={{ background: "var(--bg-soft)", borderTop: "1px solid var(--line)", padding: "40px 0" }}>
        <div className="wrap">
          <div className="grid-4" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
            {c.stats.map(s => (
              <div key={s.label} style={{ display: "flex", flexDirection: "column", gap: 6, paddingLeft: 14, borderLeft: "2px solid var(--accent)" }}>
                <span style={{ fontFamily: "Geist", fontWeight: 800, fontSize: "clamp(30px, 3vw, 40px)", letterSpacing: "-0.03em", lineHeight: 1, color: "var(--fg)" }}>{s.kpi}</span>
                <span className="mono" style={{ color: "var(--muted)" }}>{s.label}</span>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* VALUES - bloc sombre, même relief que « Pourquoi nous » */}
      <section style={{ background: "var(--black)", color: "#fff", position: "relative", overflow: "hidden" }}>
        <Relief />
        <div className="wrap" style={{ position: "relative" }}>
          <div className="grid-why" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: "40px 80px", padding: "72px 0" }}>
            <div>
              <AboutHeading eyebrow={c.values.eyebrow} title={c.values.title} titleEm={c.values.titleEm} onDark size="clamp(34px, 3.8vw, 52px)"/>
              <p style={{ color: "var(--on-dark-muted)", fontSize: 15, lineHeight: 1.65, marginTop: 24, maxWidth: 380 }}>{c.values.sub}</p>
            </div>
            <div className="grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "40px 40px" }}>
              {c.values.points.map(p => (
                <div key={p.n}>
                  <div className="mono" style={{ color: "var(--accent)", marginBottom: 10 }}>{p.n}</div>
                  <h3 style={{ color: "#fff", fontSize: 18, marginBottom: 8, lineHeight: 1.2 }}>{p.title}</h3>
                  <p style={{ color: "var(--on-dark-muted)", fontSize: 14, lineHeight: 1.6, margin: 0 }}>{p.body}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </section>

      {/* TIMELINE - liste verticale, date en mono à gauche */}
      <section className="section">
        <div className="wrap">
          <div className="grid-2" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: "32px 64px", alignItems: "start" }}>
            <AboutHeading eyebrow={c.timeline.eyebrow} title={c.timeline.title} titleEm={c.timeline.titleEm}/>
            <ol style={{ listStyle: "none", padding: 0, margin: 0, borderTop: "1px solid var(--line)" }}>
              {c.timeline.items.map((it, i) => {
                const last = i === c.timeline.items.length - 1;
                return (
                  <li key={i} style={{ display: "grid", gridTemplateColumns: "110px 1fr", gap: 20, padding: "20px 0", borderBottom: "1px solid var(--line)" }}>
                    <div className="mono" style={{ color: last ? "var(--muted)" : "var(--accent)", paddingTop: 4, display: "flex", alignItems: "flex-start", gap: 8 }}>
                      <span aria-hidden style={{ width: 6, height: 6, background: last ? "var(--line-2)" : "var(--accent)", display: "inline-block", marginTop: 4, flexShrink: 0 }}/>
                      {it.date}
                    </div>
                    <div>
                      <h3 style={{ fontSize: 18, marginBottom: 6 }}>{it.title}</h3>
                      <p style={{ color: "var(--muted)", fontSize: 14, lineHeight: 1.6, margin: 0 }}>{it.body}</p>
                    </div>
                  </li>
                );
              })}
            </ol>
          </div>
        </div>
      </section>

      {/* WHERE - texte + carte d'identité à gauche, photo à droite */}
      <section className="section" style={{ background: "var(--bg-soft)" }}>
        <div className="wrap">
          <div className="grid-2" style={{ display: "grid", gridTemplateColumns: "1.1fr 1fr", gap: "40px 64px", alignItems: "stretch" }}>
            <div>
              <AboutHeading eyebrow={c.where.eyebrow} title={c.where.title} titleEm={c.where.titleEm} style={{ marginBottom: 20 }}/>
              <p style={{ color: "var(--fg-2)", fontSize: 15, lineHeight: 1.65, margin: "0 0 28px" }}>{c.where.body}</p>
              <div className="card" style={{ padding: 22 }}>
                <div style={{ display: "flex", alignItems: "center", gap: 10, marginBottom: 14 }}>
                  <span aria-hidden style={{ width: 8, height: 8, background: "var(--accent)", display: "inline-block" }}/>
                  <span className="mono" style={{ color: "var(--muted)" }}>{c.where.idTitle}</span>
                </div>
                <dl style={{ margin: 0, display: "grid", gridTemplateColumns: "max-content 1fr", gap: "8px 18px", fontSize: 13.5 }}>
                  {c.where.id.map(([k, v]) => (
                    <React.Fragment key={k}>
                      <dt style={{ color: "var(--muted)", whiteSpace: "nowrap" }}>{k}</dt>
                      <dd style={{ margin: 0, color: "var(--fg)" }}>{v}</dd>
                    </React.Fragment>
                  ))}
                </dl>
                <div style={{ marginTop: 14, paddingTop: 12, borderTop: "1px dashed var(--line-2)", fontSize: 13 }}>
                  <a href="#/mentions-legales" style={link}>{c.where.legalLink}</a>
                </div>
              </div>
            </div>
            <div style={{ minHeight: 360, backgroundImage: "url(assets/img-inspecting-packages.jpg)", backgroundSize: "cover", backgroundPosition: "center", borderRadius: "var(--radius)", border: "1px solid var(--line)" }} role="img" aria-label={c.where.imageAlt}/>
          </div>
        </div>
      </section>
    </main>
  );
};

Object.assign(window, { AboutPage, ABOUT_ROUTES });