// Rôle : présente le projet, son fonctionnement local et les repères de contribution.
import React, { useEffect } from "react";
import { Icon } from "../components/Icon.jsx";
import { RichText } from "../components/RichText.jsx";

export function AboutPage({ siteContent }) {
  const content = siteContent.about;
  const limits = Array.isArray(content.limits) ? content.limits : [];
  const storageSectionIndex = content.sections.findIndex((section) => section.title.toLowerCase().includes("stockage"));
  const normalizeReminder = (item, index) => typeof item === "string" ? { title: `Point ${index + 1}`, text: item, icon: "toolbox" } : item;
  useEffect(() => {
    if (!location.hash.includes("#contribuer")) return;
    requestAnimationFrame(() => document.querySelector("#contribuer")?.scrollIntoView({ behavior: "smooth", block: "start" }));
  }, []);

  return (
    <div className="about-page">
      <section className="page-hero">
        <div>
          <p className="eyebrow">{content.eyebrow}</p>
          <h1>{content.title}</h1>
          <p><RichText text={content.description} /></p>
        </div>
      </section>
      <section className="about-story-section nebula-panel" aria-labelledby="about-story-title">
        <div className="about-section-heading">
          <p className="eyebrow">Principes</p>
          <h2 id="about-story-title">Comment ça fonctionne</h2>
        </div>
        <div className="about-story-list">
          {content.sections.map((section, index) => (
            <article className="about-story-item" key={section.title}>
              <span>{String(index + 1).padStart(2, "0")}</span>
              <div>
                <h3>{section.title}</h3>
                <p><RichText text={section.text} /></p>
                {index === storageSectionIndex && limits.length > 0 && (
                  <div className="about-storage-reminders">
                    <p className="eyebrow">{content.limitsTitle}</p>
                    <ul className="about-reminders-list">
                      {limits.map((item, itemIndex) => {
                        const reminder = normalizeReminder(item, itemIndex);
                        return (
                          <li className="about-reminder-item" key={reminder.title || reminder.text}>
                            <span className="module-icon" aria-hidden="true">
                              <span className={`module-icon-svg module-icon-${reminder.icon || "toolbox"}`} />
                            </span>
                            <div>
                              <h4>{reminder.title}</h4>
                              <p><RichText text={reminder.text} /></p>
                            </div>
                          </li>
                        );
                      })}
                    </ul>
                  </div>
                )}
              </div>
            </article>
          ))}
        </div>
      </section>
      <section className="about-tools-section nebula-panel">
        <div className="page-heading">
          <div>
            <p className="eyebrow">Toolbox</p>
            <h2>{content.toolsTitle}</h2>
          </div>
          <a className="button library-link-button" href="#/library"><Icon name="book" />{content.toolsLibraryLink}</a>
        </div>
        <div className="about-tools-list">
          {content.tools.map((tool) => (
            <article className="about-tool-item" key={tool.name}>
              <span className="module-icon" aria-hidden="true">
                <span className={`module-icon-svg module-icon-${tool.icon || "notepad"}`} />
              </span>
              <div>
                <h3>{tool.name}</h3>
                <p><RichText text={tool.description} /></p>
              </div>
            </article>
          ))}
        </div>
      </section>
      {content.contribute && (
        <section className="about-contribute-section nebula-panel" id="contribuer" aria-labelledby="about-contribute-title">
          <div className="about-section-heading">
            <p className="eyebrow">{content.contribute.eyebrow}</p>
            <h2 id="about-contribute-title">{content.contribute.title}</h2>
          </div>
          <div className="about-contribute-content">
            <p><RichText text={content.contribute.description} /></p>
            <pre><code>{content.contribute.example}</code></pre>
            <div className="about-prompt-box">
              <h3>{content.contribute.promptTitle}</h3>
              <p><RichText text={content.contribute.promptIntro} /></p>
              <pre><code>{content.contribute.promptText}</code></pre>
            </div>
          </div>
        </section>
      )}
    </div>
  );
}
