/* global React */
const { useState } = React;

// ============================================================
// Primitives — shared atomic components for Dimi's site
// ============================================================

function Button({ variant = "primary", size = "md", children, onClick, as: As = "button", ...rest }) {
  const cls = `dh-btn dh-btn-${variant} dh-btn-${size}`;
  return <As className={cls} onClick={onClick} {...rest}>{children}</As>;
}

function Badge({ tone = "olive", children, dot = false, stamp = false }) {
  return (
    <span className={`dh-badge dh-badge-${tone} ${stamp ? "dh-badge-stamp" : ""}`}>
      {dot && <span className="dh-badge-dot" />}
      {children}
    </span>
  );
}

function Stamp({ children, rotate = -6 }) {
  return (
    <span className="dh-stamp" style={{ transform: `rotate(${rotate}deg)` }}>
      {children}
    </span>
  );
}

function HandNote({ children, rotate = 0, color }) {
  return (
    <span
      className="dh-hand"
      style={{ transform: `rotate(${rotate}deg)`, ...(color ? { color } : {}) }}
    >
      {children}
    </span>
  );
}

// Full-width olive branch — naturalistic horizontal divider with paired
// pointed leaves, end curls, and a small center olive cluster.
// Uses the SVG asset so the artwork stays in one place.
function OliveVine({ width = "100%", height = 56 }) {
  return (
    <img
      src="assets/ornaments/olive-branch.svg"
      alt=""
      style={{ width, height, display: "block", objectFit: "contain" }}
      aria-hidden="true"
    />
  );
}

// Single pointed olive leaf — for inline accents between chapters / words.
function OliveLeaf({ height = 14 }) {
  return (
    <img
      src="assets/ornaments/olive-leaf.svg"
      alt=""
      style={{ height, width: "auto", verticalAlign: "middle", display: "inline-block" }}
      aria-hidden="true"
    />
  );
}

// Legacy alias — older code in this kit imports KeyDivider.
const KeyDivider = OliveVine;

function Laurel({ size = 56 }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" aria-hidden="true">
      <g fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round">
        <path d="M32 54 L32 12" />
        <path d="M32 18 Q22 20 18 32 M32 18 Q42 20 46 32" />
        <path d="M32 28 Q24 30 21 40 M32 28 Q40 30 43 40" />
        <path d="M32 38 Q27 40 25 48 M32 38 Q37 40 39 48" />
        <circle cx="32" cy="11" r="2" fill="currentColor" stroke="none" />
      </g>
    </svg>
  );
}

function PhotoTile({ label, h = 220, tone = "olive", caption }) {
  const palette = {
    olive: { bg: "var(--olive-700)", fg: "var(--beige-50)" },
    sand:  { bg: "var(--sand-200)", fg: "var(--olive-900)" },
    terra: { bg: "var(--terracotta-500)", fg: "var(--marble)" },
    ink:   { bg: "var(--ink-900)", fg: "var(--marble)" },
    cream: { bg: "var(--beige-100)", fg: "var(--olive-900)" }
  }[tone] || { bg: "var(--olive-700)", fg: "var(--marble)" };
  return (
    <figure
      className="dh-photo"
      data-photo={label}
      style={{ background: palette.bg, color: palette.fg, height: h }}
    >
      <span className="dh-photo-mark" aria-hidden="true">
        <Laurel size={28} />
      </span>
      <figcaption>
        <span className="dh-photo-label">{label}</span>
        {caption && <span className="dh-photo-caption">{caption}</span>}
      </figcaption>
    </figure>
  );
}

function MenuRow({ name, desc, price, tags = [] }) {
  return (
    <div className="dh-menurow">
      <div>
        <h4 className="dh-menurow-name">
          {name}
          {tags.map(t => <span key={t} className={`dh-menurow-tag ${t === "gf" ? "dh-menurow-tag-gf" : ""}`}>{t}</span>)}
        </h4>
        <p className="dh-menurow-desc">{desc}</p>
      </div>
      {!!price && <span className="dh-menurow-price">${price}</span>}
    </div>
  );
}

function Section({ id, eyebrow, title, lead, children, bg }) {
  return (
    <section id={id} className="dh-section" style={bg ? { background: bg } : null}>
      <div className="dh-section-inner">
        {(eyebrow || title || lead) && (
          <header className="dh-section-head">
            {eyebrow && <span className="dh-eyebrow">{eyebrow}</span>}
            {title && <h2 className="dh-section-title">{title}</h2>}
            {lead && <p className="dh-section-lead">{lead}</p>}
          </header>
        )}
        {children}
      </div>
    </section>
  );
}

Object.assign(window, {
  Button, Badge, Stamp, HandNote, OliveVine, OliveLeaf, KeyDivider, Laurel,
  PhotoTile, MenuRow, Section
});