/* Akasha — primitives: brand mark, one-line illustrations, icon, button */

function Mark({ className = "mk" }) {
  return <img className={className} src={A("assets/akasha-logo.webp")} alt="Akasha" />;
}

function MarkLine({ className = "mk" }) {
  return (
    <svg className={className} viewBox="0 0 120 120" fill="none" aria-hidden="true">
      <g stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round">
        <path d="M74 20.5 A44 44 0 1 0 99.5 56" />
        <path d="M60 92 C60 76 60 62 60 44" />
        <path d="M60 70 C72 67 79 60 80 50 C69 50 61 56 60 66" />
        <path d="M60 60 C48 57 41 50 40 40 C51 40 59 46 60 56" />
        <path d="M60 50 C70 47 76 41 77 33 C68 33 61 38 60 47" />
      </g>
    </svg>
  );
}

function Botanical({ className = "illus" }) {
  return (
    <svg className={className} viewBox="0 0 240 320" fill="none" aria-hidden="true">
      <g stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M120 308 C120 250 116 188 124 130 C130 86 146 50 176 24" />
        <path d="M122 250 C150 246 172 232 180 206 C150 206 128 222 122 246" />
        <path d="M120 214 C148 210 169 196 177 171 C148 171 126 187 120 210" />
        <path d="M122 178 C148 175 167 162 174 139 C147 139 127 154 122 175" />
        <path d="M127 142 C150 139 167 127 173 107 C149 107 132 121 127 139" />
        <path d="M120 232 C92 229 71 215 64 191 C92 190 113 205 120 228" />
        <path d="M120 196 C94 193 75 180 69 158 C95 158 114 172 120 192" />
        <path d="M123 160 C99 157 81 145 76 124 C100 124 118 138 123 156" />
      </g>
    </svg>
  );
}

function Profile({ className = "illus" }) {
  return (
    <svg className={className} viewBox="0 0 300 250" fill="none" aria-hidden="true">
      <g stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
        <circle cx="150" cy="48" r="23" />
        <path d="M135 74 C130 96 126 126 123 156" />
        <path d="M165 74 C170 96 174 126 177 156" />
        <path d="M123 156 C98 167 73 181 61 205 C111 220 189 220 239 205 C227 181 202 167 177 156" />
        <path d="M86 198 C120 184 180 184 214 198" />
        <path d="M135 78 C112 108 92 152 80 192" />
        <path d="M165 78 C188 108 208 152 220 192" />
      </g>
    </svg>
  );
}

function Flow({ className = "illus" }) {
  return (
    <svg className={className} viewBox="0 0 360 300" fill="none" aria-hidden="true">
      <g stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
        <path d="M28 196 C70 120 120 96 168 132 C200 156 196 206 232 214 C272 222 300 176 296 128 C292 84 256 64 220 78" />
        <path d="M60 232 C120 210 150 168 156 120 C160 88 150 60 124 48" />
        <path d="M104 250 C170 248 232 230 280 196" />
      </g>
    </svg>
  );
}

const ILLUS = { botanical: Botanical, profile: Profile, flow: Flow };
function Illustration({ name = "botanical", className = "illus" }) {
  const C = ILLUS[name] || Botanical;
  return <C className={className} />;
}

/* Lucide icon — relies on lucide.createIcons() running after render */
function Icon({ name, className }) {
  return <i data-lucide={name} className={className}></i>;
}

function Button({ variant = "primary", icon, iconLeft, children, onClick, type = "button", className = "" }) {
  return (
    <button type={type} className={`btn btn--${variant} ${className}`} onClick={onClick}>
      {iconLeft && <Icon name={iconLeft} />}
      {variant === "text" ? <span className="u">{children}</span> : children}
      {icon && <Icon name={icon} />}
    </button>
  );
}

/* section head used across pages */
function Head({ eyebrow, title, action, center }) {
  return (
    <div className={`head ${center ? "center" : ""}`} style={center ? { justifyContent: "center", textAlign: "center", flexDirection: "column", alignItems: "center" } : null}>
      <div>
        {eyebrow && <p className="eyebrow">{eyebrow}</p>}
        <h2 className="serif" dangerouslySetInnerHTML={{ __html: title }} />
      </div>
      {action}
    </div>
  );
}

Object.assign(window, { Mark, Botanical, Profile, Flow, Illustration, Icon, Button, Head });