// Dietello Logo — two concepts × two layouts
//
// Concept A · Leaf — organic, curved leaf with center vein + AI sparkle
// Concept B · D-spark — geometric monogram "d" with a lime sparkle inside
//                        the bowl (also reads as a caring face/bowl)
//
// Layouts: horizontal (mark + wordmark inline) and square (mark above wordmark)

// ──────────────────────────────────────────────────────────
// CONCEPT A — Leaf mark
// ──────────────────────────────────────────────────────────
function LogoMark({ size = 64, fill = '#181612', accent = '#D4FF4F', sparkle = '#FF6A4D', flat = false }) {
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" style={{ display: 'block' }}>
      <path d="M 8 56 C 8 28, 28 8, 56 8 C 56 36, 36 56, 8 56 Z" fill={fill} />
      {!flat && (
        <path d="M 14 50 C 22 40, 32 30, 50 14"
          stroke={accent} strokeWidth="3.5" fill="none" strokeLinecap="round" />
      )}
      {!flat && (
        <g transform="translate(46, 22)">
          <path d="M 0 -5 L 1.5 -1.5 L 5 0 L 1.5 1.5 L 0 5 L -1.5 1.5 L -5 0 L -1.5 -1.5 Z"
            fill={sparkle} />
        </g>
      )}
    </svg>
  );
}

// ──────────────────────────────────────────────────────────
// CONCEPT B — D-spark monogram
// Geometric lowercase "d": vertical stem on the right + a circle bowl
// on the left, with a lime sparkle inside the bowl.
// Reads as: letter d / a face profile / a plate seen from side.
// ──────────────────────────────────────────────────────────
function LogoMarkAlt({ size = 64, fill = '#181612', accent = '#D4FF4F', sparkle = '#FF6A4D', flat = false }) {
  // viewBox 64×64
  // Bowl: circle at (24, 36) r=18
  // Stem: rect on right side, from y=8 to y=54, x=42..52
  return (
    <svg width={size} height={size} viewBox="0 0 64 64" style={{ display: 'block' }}>
      {/* Composite "d" shape using even-odd fill rule so the hollow inside shows */}
      <path
        fillRule="evenodd"
        fill={fill}
        d="
          M 42 8
          L 52 8
          L 52 54
          L 42 54
          L 42 47
          A 18 18 0 1 1 42 25
          L 42 8 Z
          M 24 26
          A 10 10 0 1 0 24 46
          A 10 10 0 1 0 24 26 Z
        "
      />
      {!flat && (
        <>
          {/* Sparkle inside the bowl */}
          <g transform="translate(24, 36)">
            <path
              d="M 0 -6 L 1.6 -1.6 L 6 0 L 1.6 1.6 L 0 6 L -1.6 1.6 L -6 0 L -1.6 -1.6 Z"
              fill={accent}
            />
          </g>
          {/* Small coral dot above the stem — the "tittle"/spark, matches wordmark */}
          <circle cx="47" cy="3.5" r="2.6" fill={sparkle} />
        </>
      )}
    </svg>
  );
}

// ──────────────────────────────────────────────────────────
// Wordmark
// ──────────────────────────────────────────────────────────
function Wordmark({ size = 24, color = '#181612', dotColor = '#D4FF4F' }) {
  return (
    <div style={{
      fontFamily: 'Unbounded, sans-serif',
      fontSize: size,
      fontWeight: 600,
      letterSpacing: '-0.04em',
      color,
      display: 'inline-flex',
      alignItems: 'center',
      lineHeight: 1,
    }}>
      <span>d</span>
      <span style={{ position: 'relative' }}>
        i
        <span style={{
          position: 'absolute',
          top: size * -0.05,
          left: '50%',
          transform: 'translateX(-50%)',
          width: size * 0.18,
          height: size * 0.18,
          background: dotColor,
          borderRadius: '50%',
        }} />
      </span>
      <span>etello</span>
    </div>
  );
}

// ──────────────────────────────────────────────────────────
// Variant palettes (shared between concepts)
// ──────────────────────────────────────────────────────────
const PALETTES = {
  color:        { fill: '#181612', accent: '#D4FF4F', sparkle: '#FF6A4D', text: '#181612', dot: '#D4FF4F' },
  light:        { fill: '#181612', accent: '#D4FF4F', sparkle: '#FF6A4D', text: '#181612', dot: '#D4FF4F' },
  dark:         { fill: '#D4FF4F', accent: '#181612', sparkle: '#FF6A4D', text: '#F6F2E9', dot: '#D4FF4F' },
  mono:         { fill: 'currentColor', accent: 'transparent', sparkle: 'transparent', text: 'currentColor', dot: 'currentColor', flat: true },
  monoInverse:  { fill: '#fff', accent: 'transparent', sparkle: 'transparent', text: '#fff', dot: '#fff', flat: true },
};

// MarkOnly — choose A or B
function Mark({ concept = 'A', variant = 'color', size = 64 }) {
  const p = PALETTES[variant];
  const C = concept === 'B' ? LogoMarkAlt : LogoMark;
  return <C size={size} fill={p.fill} accent={p.accent} sparkle={p.sparkle} flat={p.flat} />;
}

// ──────────────────────────────────────────────────────────
// Layout: Horizontal (mark + wordmark inline)
// ──────────────────────────────────────────────────────────
function Logo({ concept = 'A', variant = 'color', size = 48, wordmark = true }) {
  const p = PALETTES[variant];
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: size * 0.22 }}>
      <Mark concept={concept} variant={variant} size={size} />
      {wordmark && <Wordmark size={size * 0.42} color={p.text} dotColor={p.dot} />}
    </div>
  );
}

// ──────────────────────────────────────────────────────────
// Layout: Square / Vertical (mark above wordmark, centered)
// ──────────────────────────────────────────────────────────
function LogoSquare({ concept = 'A', variant = 'color', size = 100, wordmark = true, tagline }) {
  const p = PALETTES[variant];
  return (
    <div style={{
      display: 'inline-flex', flexDirection: 'column', alignItems: 'center',
      gap: size * 0.16,
    }}>
      <Mark concept={concept} variant={variant} size={size} />
      {wordmark && <Wordmark size={size * 0.30} color={p.text} dotColor={p.dot} />}
      {tagline && (
        <div style={{
          fontFamily: 'Onest, sans-serif',
          fontSize: size * 0.10, fontWeight: 500,
          color: p.text, opacity: 0.55,
          letterSpacing: '0.1em',
          textTransform: 'uppercase',
          marginTop: size * -0.04,
        }}>{tagline}</div>
      )}
    </div>
  );
}

Object.assign(window, {
  Logo, LogoSquare, LogoMark, LogoMarkAlt, Mark, Wordmark, PALETTES,
});