/* global React */
// ====================================================================
// PalmMark — the Oasis Dev Labs palm logo.
// Clean, modern coconut-palm built from curved strokes so it reads
// at any size. `animated` makes the fronds sway gently (hero use).
// ====================================================================

const FRONDS = [
  "M32 23 C 20 19, 10.5 20.5, 6 27",     // far-left droop
  "M32 23 C 22 16, 15 11.5, 11 8.5",     // left
  "M32 23 C 28 13, 25 7.5, 23.5 3.5",    // top-left
  "M32 23 C 36 13, 39 7.5, 40.5 3.5",    // top-right
  "M32 23 C 42 16, 49 11.5, 53 8.5",     // right
  "M32 23 C 44 19, 53.5 20.5, 58 27",    // far-right droop
];

function PalmMark({ size = 40, color = "var(--palm)", trunk, animated = false, style }) {
  const trunkColor = trunk || color;
  return (
    <svg
      width={size}
      height={size}
      viewBox="0 0 64 64"
      fill="none"
      className={animated ? "palm-anim" : ""}
      style={style}
      aria-label="Oasis Dev Labs"
      role="img"
    >
      {/* trunk */}
      <path
        d="M32.5 24 C 31 34, 30 44, 31 55"
        stroke={trunkColor}
        strokeWidth="3.2"
        strokeLinecap="round"
      />
      {/* fronds */}
      <g style={{ transformOrigin: "32px 23px" }}>
        {FRONDS.map((d, i) => (
          <path
            key={i}
            d={d}
            stroke={color}
            strokeWidth="3"
            strokeLinecap="round"
            className={animated ? `frond frond-${i}` : ""}
            style={{ transformOrigin: "32px 23px" }}
          />
        ))}
      </g>
      {/* coconuts */}
      <circle cx="29" cy="26.5" r="1.9" fill={color} />
      <circle cx="34.5" cy="27" r="1.9" fill={color} />
      <circle cx="31.5" cy="24" r="1.9" fill={color} />
    </svg>
  );
}

// Lockup: mark + wordmark, for nav and footer
function Logo({ size = 38, mono = false, onClick }) {
  const c = mono ? "currentColor" : "var(--palm)";
  return (
    <div className="logo" onClick={onClick} role="button" tabIndex={0}>
      <span className="logo-badge">
        <PalmMark size={size} color={c} trunk={mono ? "currentColor" : "var(--sunset-deep)"} />
      </span>
      <span className="logo-text">
        <span className="logo-name">Oasis<span className="logo-accent">Dev</span>Labs</span>
        <span className="logo-tag">Mobile Studio · Mexicali</span>
      </span>
    </div>
  );
}

window.PalmMark = PalmMark;
window.Logo = Logo;