// Rôle : affiche la page d'accueil et les contenus éditoriaux principaux.
import { TOOLBOX_MODULES } from "../features/toolboxes/toolboxModuleRegistry.js";
import { RichText } from "../components/RichText.jsx";
import { HomeOnboardingSection } from "./HomeOnboardingSection.jsx";

export function HomePage({ siteContent, toolboxes, actions }) {
  const content = siteContent.home;
  const toolCount = Object.keys(TOOLBOX_MODULES).length;
  const showOnboarding = import.meta.env.DEV || toolboxes.length === 0;
  return (
    <>
      <section className="hero">
        <div>
          <p className="eyebrow">{content.hero.eyebrow}</p>
          <h1>{content.hero.title}</h1>
          <p>{content.hero.description}</p>
          <div className="actions">
            <a className="nds-button" data-size="md" data-variant="primary" href="#/toolboxes">{content.hero.primaryAction}</a>
            <a className="nds-button" data-size="md" href="#/games">{content.hero.secondaryAction}</a>
          </div>
        </div>
        <div className="home-stats hero-stats" aria-label="Statistiques locales du site">
          <article><strong>{toolboxes.length}</strong><span>{toolboxes.length > 1 ? content.stats.toolboxPlural : content.stats.toolboxSingular}</span></article>
          <article><strong>{toolCount}</strong><span>{toolCount > 1 ? content.stats.toolPlural : content.stats.toolSingular}</span></article>
        </div>
      </section>
      {showOnboarding && <HomeOnboardingSection content={content.onboarding} onCreateToolbox={() => actions.setCreateModal({ tutorial: true })} />}
      <section className="origin-section nebula-panel" aria-labelledby="origin-title">
        <div className="origin-copy">
          <p className="eyebrow">{content.origin.eyebrow}</p>
          <h2 id="origin-title">{content.origin.title}</h2>
          <div className="home-dialogue" aria-label={content.origin.dialogueAriaLabel}>
            {content.origin.lines.map((line, index) => <DialogueLine key={index} line={line} />)}
            <small className="dialogue-caption">{content.origin.caption}</small>
          </div>
        </div>
        <div className="home-visual" aria-label="Illustration Sokko G">
          <img src="/static/img/dragon-home.png" alt={content.origin.visualAlt} />
        </div>
      </section>
      <footer className="home-legal">
        <p>{content.legal.copyright}</p>
        <p>{content.legal.disclaimer}</p>
      </footer>
    </>
  );
}

function DialogueLine({ line }) {
  return <p className={`dialogue-line dialogue-line-${line.speaker === "app" ? "app" : "user"}`}><RichText text={line.text || ""} /></p>;
}