// ============================================================
//  COMPOSANTS COMMUNS — Badges, Logo, Devise, etc.
// ============================================================

const LogoAJC = ({ size = 40 }) => (
  <div className="flex items-center" style={{ gap: 10 }}>
    <img
      src="/static/assets/logo-ajc-officiel.png"
      alt="Logo AJC — Association des Anciens Juvénistes de St Camille"
      width={size}
      height={size}
      style={{ width: size, height: size, objectFit: "contain", display: "block" }}
    />
    <div className="leading-tight">
      <div className="font-display font-bold text-ajc-blue tracking-wide" style={{ fontSize: size * 0.48, lineHeight: 1 }}>AJC</div>
      <div className="text-[10px] uppercase tracking-[0.18em] text-ajc-mute font-semibold">Saint Camille</div>
    </div>
  </div>
);

const LogoIPSCA = ({ size = 60 }) => (
  <img src="https://www.genspark.ai/api/files/s/84OfM36e" alt="IPSCA" style={{ width: size, height: 'auto' }} className="object-contain"/>
);

const Motto = ({ className = "" }) => {
  const { t } = window.useApp ? window.useApp() : { t: { motto: "Responsabilité · Abnégation · Excellence" } };
  return (
    <div className={"font-display italic text-ajc-blue/80 tracking-wide " + className}>
      {t.motto}
    </div>
  );
};

const Badge = ({ tone = "blue", icon, children }) => {
  const tones = {
    blue:   "bg-ajc-blue/10 text-ajc-blue",
    gold:   "bg-ajc-gold/20 text-yellow-800",
    red:    "bg-ajc-red/10 text-ajc-red",
    green:  "bg-ajc-green/15 text-emerald-800",
    gray:   "bg-gray-100 text-gray-700"
  };
  return (
    <span className={"badge " + tones[tone]}>
      {icon && <Icon name={icon} size={12} strokeWidth={2.2}/>}
      {children}
    </span>
  );
};

const Btn = ({ variant = "primary", icon, size = "md", children, ...rest }) => {
  const variants = {
    primary:    "bg-ajc-blue text-white hover:bg-ajc-blue2",
    secondary:  "bg-white text-ajc-blue border border-ajc-blue/20 hover:border-ajc-blue/50 hover:bg-ajc-blue/5",
    gold:       "bg-ajc-gold text-ajc-blue hover:bg-ajc-gold2 font-semibold",
    ghost:      "bg-transparent text-ajc-blue hover:bg-ajc-blue/5",
    danger:     "bg-ajc-red text-white hover:bg-red-700"
  };
  const sizes = { sm: "text-xs px-3 py-1.5 gap-1.5", md: "text-sm px-4 py-2.5 gap-2", lg: "text-base px-6 py-3 gap-2.5" };
  return (
    <button
      {...rest}
      className={"inline-flex items-center justify-center rounded-lg transition font-medium " + variants[variant] + " " + sizes[size] + " " + (rest.className || "")}
    >
      {icon && <Icon name={icon} size={size === "sm" ? 14 : size === "lg" ? 18 : 16}/>}
      {children}
    </button>
  );
};

const Section = ({ children, className = "" }) => (
  <section className={"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 " + className}>{children}</section>
);

const SectionTitle = ({ overline, title, lead, center = false }) => (
  <div className={"mb-8 " + (center ? "text-center max-w-3xl mx-auto" : "")}>
    {overline && (
      <div className="flex items-center gap-3 mb-2" style={center ? { justifyContent: 'center' } : {}}>
        <div className="liturgy-underline w-12"></div>
        <div className="text-[11px] uppercase tracking-[0.22em] text-ajc-red font-semibold">{overline}</div>
        <div className="liturgy-underline w-12"></div>
      </div>
    )}
    <h2 className="font-display text-3xl md:text-4xl font-semibold text-ajc-blueDk">{title}</h2>
    {lead && <p className="mt-3 text-ajc-mute text-lg leading-relaxed">{lead}</p>}
  </div>
);

const VerseBlock = ({ verse, ref_, className = "" }) => (
  <div className={"relative py-8 px-6 md:px-10 rounded-2xl bg-gradient-to-br from-ajc-blue to-ajc-blueDk text-white overflow-hidden " + className}>
    <div className="absolute inset-0 cross-watermark opacity-30 pointer-events-none"></div>
    <Icon name="quote" size={40} className="text-ajc-gold/40 mb-2"/>
    <p className="font-display italic text-xl md:text-2xl leading-snug max-w-2xl">{verse}</p>
    <div className="mt-3 text-ajc-gold text-sm tracking-wide font-medium">— {ref_}</div>
  </div>
);

// Hook global app context
const AppContext = React.createContext(null);
const useApp = () => React.useContext(AppContext);
window.AppContext = AppContext;
window.useApp = useApp;

Object.assign(window, { LogoAJC, LogoIPSCA, Motto, Badge, Btn, Section, SectionTitle, VerseBlock });