// Primitives: placeholder imagery, icons, badges
const { useState } = React;

// Placeholder image block — striped SVG-ish with mono label
function Placeholder({ aspect = "16x9", tone = "sand", label, corner, alt, className = "", style }) {
  const cls = `ph ph-${aspect} ${tone === "sage" ? "ph-sage" : tone === "sand-deep" ? "ph-sand-deep" : tone === "ink" ? "ph-ink" : ""} ${className}`;
  return (
    <div className={cls} role="img" aria-label={alt || label} style={style}>
      {corner && <span className="ph-corner">{corner}</span>}
      {label && <span className="ph-label">{label}</span>}
    </div>
  );
}

// Simple icon set (inline SVG, stroked)
const Icon = {
  Play: ({ size = 20 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
      <path d="M8 5v14l11-7z" />
    </svg>
  ),
  Lock: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
      <rect x="5" y="11" width="14" height="10" rx="1.5" />
      <path d="M8 11V8a4 4 0 0 1 8 0v3" />
    </svg>
  ),
  Check: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 12l5 5 11-12" />
    </svg>
  ),
  Chevron: ({ size = 14, dir = "down" }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"
      style={{ transform: dir === "up" ? "rotate(180deg)" : dir === "right" ? "rotate(-90deg)" : dir === "left" ? "rotate(90deg)" : "none" }}>
      <path d="M6 9l6 6 6-6" />
    </svg>
  ),
  Arrow: ({ size = 16, dir = "right" }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"
      style={{ transform: dir === "left" ? "rotate(180deg)" : "none" }}>
      <path d="M5 12h14M13 5l7 7-7 7" />
    </svg>
  ),
  Google: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 48 48" aria-hidden="true">
      <path fill="#EA4335" d="M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z"/>
      <path fill="#4285F4" d="M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z"/>
      <path fill="#FBBC05" d="M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z"/>
      <path fill="#34A853" d="M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z"/>
    </svg>
  ),
  Apple: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
      <path d="M16.37 12.47c-.02-2.17 1.77-3.22 1.85-3.27-1.01-1.48-2.59-1.68-3.15-1.7-1.34-.14-2.62.79-3.3.79-.69 0-1.74-.77-2.87-.75-1.47.02-2.84.86-3.6 2.18-1.54 2.66-.39 6.6 1.1 8.76.73 1.06 1.59 2.24 2.72 2.2 1.1-.05 1.52-.71 2.84-.71s1.7.71 2.87.69c1.19-.02 1.94-1.07 2.67-2.13.84-1.23 1.19-2.42 1.21-2.48-.03-.01-2.32-.89-2.34-3.58zM14.23 5.9c.6-.74 1.01-1.76.9-2.77-.87.04-1.93.58-2.56 1.31-.56.64-1.06 1.68-.93 2.67.97.07 1.98-.49 2.59-1.21z"/>
    </svg>
  ),
};

// Button primitives used across screens
function Button({ children, variant = "solid", size, onClick, className = "", ariaLabel, href, as }) {
  const cls = `${variant === "ghost" ? "btn-ghost" : variant === "link" ? "btn-link" : variant === "terra" ? "btn btn-terra" : "btn"}${size === "lg" ? " btn-lg" : size === "sm" ? " btn-sm" : ""} ${className}`;
  if (as === "a" || href) return <a className={cls} href={href} onClick={onClick} aria-label={ariaLabel}>{children}</a>;
  return <button className={cls} onClick={onClick} aria-label={ariaLabel}>{children}</button>;
}

function Chip({ children, tone = "default", className = "" }) {
  return <span className={`chip ${tone === "sage" ? "chip-sage" : tone === "terra" ? "chip-terra" : tone === "soon" ? "chip-soon" : tone === "ink" ? "chip-solid-ink" : tone === "ghost" ? "chip-ghost" : ""} ${className}`}>{children}</span>;
}

function Breadcrumb({ items, onNav }) {
  return (
    <nav className="breadcrumb container" aria-label="Breadcrumb">
      {items.map((it, i) => (
        <React.Fragment key={i}>
          {i > 0 && <span className="sep">›</span>}
          {it.path ? (
            <a href={`#${it.path}`} onClick={(e) => { e.preventDefault(); onNav(it.path); }}>{it.label}</a>
          ) : (
            <span>{it.label}</span>
          )}
        </React.Fragment>
      ))}
    </nav>
  );
}

// Module card — used in catalog and featured
function ModuleCard({ module, part, onOpen }) {
  const soon = module.state === "soon";
  const tones = ["sand", "sage", "sand-deep", "ink"];
  const tone = module.thumbTone || tones[module.chapter % tones.length];
  return (
    <article
      className={`card ${soon ? "is-soon" : "is-hoverable"}`}
      onClick={() => !soon && onOpen && onOpen(`/m/${module.id}`)}
      role={soon ? undefined : "button"}
      tabIndex={soon ? -1 : 0}
      onKeyDown={(e) => !soon && (e.key === "Enter" || e.key === " ") && onOpen && onOpen(`/m/${module.id}`)}
      aria-disabled={soon ? true : undefined}
    >
      <div className="card-thumb">
        <Placeholder
          aspect="4x3"
          tone={tone}
          label={soon ? `Ch. ${module.chapter} · upcoming imagery` : module.thumbAlt || `Ch. ${module.chapter} imagery`}
          corner="placeholder"
          alt={module.thumbAlt || `Module thumbnail — ${module.title} (placeholder)`}
        />
      </div>
      <div className="card-body">
        <div className="card-title">{module.title}</div>
        <div className="card-subtitle">Chapter {module.chapter}</div>
        <div className="card-meta">
          {soon ? (
            <Chip tone="soon">Coming soon</Chip>
          ) : (
            <span>{module.videos} videos · {module.minutes} min</span>
          )}
          {!soon && <strong style={{ fontFamily: "var(--ff-serif)", fontSize: 20 }}>${module.price}</strong>}
        </div>
      </div>
    </article>
  );
}

Object.assign(window, { Placeholder, Icon, Button, Chip, Breadcrumb, ModuleCard });