/* global React */
/* EgoYüzme · Primitives — Button, Eyebrow, Chip, Icon, Field */

const Icon = ({ name, size = 20, stroke = 1.75, color = "currentColor", ...rest }) => (
  <i
    className={`lucide lucide-${name}`}
    style={{ display: "inline-flex", width: size, height: size, color, ...rest.style }}
    data-lucide={name}
    {...rest}
  />
);

const Button = ({ variant = "primary", size, glow, children, leftIcon, rightIcon, ...rest }) => (
  <button
    className={[
      "btn",
      `btn--${variant}`,
      size === "lg" ? "btn--lg" : size === "sm" ? "btn--sm" : "",
      glow ? "btn--glow" : "",
    ].filter(Boolean).join(" ")}
    {...rest}
  >
    {leftIcon ? <Icon name={leftIcon} size={16} /> : null}
    {children}
    {rightIcon ? <Icon name={rightIcon} size={16} /> : null}
  </button>
);

const Eyebrow = ({ children, color, style }) => (
  <div className="eyebrow" style={{ ...(color ? { color } : null), ...style }}>{children}</div>
);

const Chip = ({ variant = "blue", children, leadDot, style }) => {
  const map = {
    blue: "", orange: "chip--orange", slate: "chip--slate",
    soft: "chip--soft", navy: "chip--navy", success: "chip--success",
    solidBlue: "chip--solid-blue", solidOrange: "chip--solid-orange",
    outline: "chip--outline",
  };
  return (
    <span className={`chip ${map[variant] || ""}`} style={style}>
      {leadDot ? <span className="dot" /> : null}
      {children}
    </span>
  );
};

const Field = ({ label, hint, error, children }) => (
  <div className="field">
    {label ? <label>{label}</label> : null}
    {children}
    {error ? <span className="err">{error}</span> : hint ? <span className="help">{hint}</span> : null}
  </div>
);

/* ----- Inline check icon used in lists ----- */
const CheckCircle = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="20 6 9 17 4 12" />
  </svg>
);

/* ----- Page heading helper ----- */
const PageHero = ({ crumbs, eyebrow, title, lead, image }) => (
  <section className="page-hero">
    {image ? (
      <div className="photo" style={{ backgroundImage: `url('${image}')` }} />
    ) : null}
    <div className="protection" />
    <img className="turtle-bg" src="assets/logos/turtle-mark-white.png" alt="" aria-hidden="true" />
    <div className="container">
      <div className="inner">
        {crumbs ? (
          <div className="crumbs">
            {crumbs.map((c, i) => (
              <React.Fragment key={i}>
                {i > 0 ? <span>›</span> : null}
                {c.href ? <a href={c.href}>{c.label}</a> : <span>{c.label}</span>}
              </React.Fragment>
            ))}
          </div>
        ) : null}
        {eyebrow ? <Eyebrow color="#BDE6F0">{eyebrow}</Eyebrow> : null}
        <h1 className="mt-4">{title}</h1>
        {lead ? <p className="lead">{lead}</p> : null}
      </div>
    </div>
  </section>
);

Object.assign(window, { Icon, Button, Eyebrow, Chip, Field, CheckCircle, PageHero });