import React from 'react';

interface EntourageLogoProps {
  className?: string;
  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
  variant?: 'coral' | 'orange' | 'navy' | 'lightBlue' | 'white' | 'currentColor';
  showText?: boolean;
  layout?: 'stacked' | 'horizontal';
}

export const EntourageLogo: React.FC<EntourageLogoProps> = ({ 
  className = '', 
  size = 'md',
  variant = 'orange',
  showText = true,
  layout = 'stacked'
}) => {
  // Brand Color Palette extracted from reference:
  // Primary Logo Orange: #ea7851 / #e17f52
  // Deep Navy:           #2e4056
  // Accent Teal:         #517e8a
  const colorMap: Record<string, string> = {
    coral: '#ea7851',
    orange: '#ea7851',
    navy: '#2e4056',
    lightBlue: '#517e8a',
    white: '#FFFFFF',
    currentColor: 'currentColor'
  };

  const markColor = colorMap[variant] || '#ea7851';

  // Responsive sizing classes
  const fullSizes = {
    xs: 'w-24 h-auto',
    sm: 'w-36 sm:w-44 h-auto',
    md: 'w-52 sm:w-64 h-auto',
    lg: 'w-64 sm:w-80 h-auto',
    xl: 'w-72 sm:w-96 md:w-[28rem] h-auto'
  }[size];

  const iconSizes = {
    xs: 'w-8 h-8',
    sm: 'w-10 h-10 sm:w-12 sm:h-12',
    md: 'w-16 h-16 sm:w-20 sm:h-20',
    lg: 'w-24 h-24 sm:w-28 sm:h-28',
    xl: 'w-32 h-32 sm:w-44 sm:h-44'
  }[size];

  const wordmarkWidths = {
    xs: 'w-24',
    sm: 'w-36 sm:w-44',
    md: 'w-52 sm:w-64',
    lg: 'w-64 sm:w-80',
    xl: 'w-72 sm:w-[28rem]'
  }[size];

  // 1:1 Unified Stacked Reference SVG matching "ENTOURAGE LOGO-NVY_ORG - 1.jpg"
  if (layout === 'stacked' && showText) {
    return (
      <div className={`flex flex-col items-center justify-center text-center ${className}`}>
        <svg 
          viewBox="0 0 500 500" 
          fill="none" 
          xmlns="http://www.w3.org/2000/svg"
          className={`${fullSizes} select-none overflow-visible`}
          aria-label="Entourage Luxury Yacht Logo"
        >
          {/* ============================================================== */}
          {/* 1. TOP ANCHOR RING                                            */}
          {/* ============================================================== */}
          <circle 
            cx="250" 
            cy="124" 
            r="18" 
            stroke={markColor} 
            strokeWidth="11" 
            fill="none" 
          />

          {/* ============================================================== */}
          {/* 2. HORIZONTAL STOCK / CROSSBAR (Flat butt ends)               */}
          {/* ============================================================== */}
          <line 
            x1="168" 
            y1="156" 
            x2="332" 
            y2="156" 
            stroke={markColor} 
            strokeWidth="11" 
            strokeLinecap="butt" 
          />

          {/* ============================================================== */}
          {/* 3. CENTER VERTICAL SHANK                                       */}
          {/* ============================================================== */}
          <line 
            x1="250" 
            y1="142" 
            x2="250" 
            y2="332" 
            stroke={markColor} 
            strokeWidth="11" 
            strokeLinecap="butt" 
          />

          {/* ============================================================== */}
          {/* 4. LEFT MIRRORED 'E' (Symmetrical hook fluke)                 */}
          {/* ============================================================== */}
          {/* Top Bar */}
          <line 
            x1="178" 
            y1="178" 
            x2="228" 
            y2="178" 
            stroke={markColor} 
            strokeWidth="11" 
            strokeLinecap="butt" 
          />
          {/* Middle Bar */}
          <line 
            x1="190" 
            y1="218" 
            x2="228" 
            y2="218" 
            stroke={markColor} 
            strokeWidth="11" 
            strokeLinecap="butt" 
          />
          {/* Vertical Stem + Bottom Hook curving upward into fluke */}
          <path 
            d="M 228 178 L 228 266 C 228 288, 196 288, 175 258" 
            stroke={markColor} 
            strokeWidth="11" 
            strokeLinecap="round" 
            strokeLinejoin="round" 
            fill="none" 
          />

          {/* ============================================================== */}
          {/* 5. RIGHT NORMAL 'E' (Symmetrical hook fluke)                   */}
          {/* ============================================================== */}
          {/* Top Bar */}
          <line 
            x1="272" 
            y1="178" 
            x2="322" 
            y2="178" 
            stroke={markColor} 
            strokeWidth="11" 
            strokeLinecap="butt" 
          />
          {/* Middle Bar */}
          <line 
            x1="272" 
            y1="218" 
            x2="310" 
            y2="218" 
            stroke={markColor} 
            strokeWidth="11" 
            strokeLinecap="butt" 
          />
          {/* Vertical Stem + Bottom Hook curving upward into fluke */}
          <path 
            d="M 272 178 L 272 266 C 272 288, 304 288, 325 258" 
            stroke={markColor} 
            strokeWidth="11" 
            strokeLinecap="round" 
            strokeLinejoin="round" 
            fill="none" 
          />

          {/* ============================================================== */}
          {/* 6. BOTTOM OUTER ANCHOR CRADLE (Pointed bottom center apex)    */}
          {/* ============================================================== */}
          <path 
            d="M 152 262 C 162 310, 222 334, 250 346 C 278 334, 338 310, 348 262" 
            stroke={markColor} 
            strokeWidth="11.5" 
            strokeLinecap="round" 
            strokeLinejoin="miter" 
            fill="none" 
          />

          {/* ============================================================== */}
          {/* 7. CUSTOM WORDMARK "ENTOURAGE" (Exact geometric typeface)     */}
          {/* ============================================================== */}
          <g transform="translate(0, 0)">
            {/* Letter 1: E - Detached floating top bar + Lower body */}
            <line x1="46" y1="400" x2="78" y2="400" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" />
            <path d="M 78 444 L 50 444 L 50 418 L 72 418" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" strokeLinejoin="miter" fill="none" />

            {/* Letter 2: N */}
            <line x1="94" y1="400" x2="94" y2="444" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" />
            <line x1="94" y1="400" x2="128" y2="444" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" />
            <line x1="128" y1="400" x2="128" y2="444" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" />

            {/* Letter 3: T */}
            <line x1="142" y1="400" x2="178" y2="400" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" />
            <line x1="160" y1="400" x2="160" y2="444" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" />

            {/* Letter 4: O */}
            <circle cx="212" cy="422" r="22" stroke={markColor} strokeWidth="5.5" fill="none" />

            {/* Letter 5: U */}
            <path d="M 248 400 L 248 426 C 248 444, 280 444, 280 426 L 280 400" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" fill="none" />

            {/* Letter 6: R */}
            <line x1="294" y1="400" x2="294" y2="444" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" />
            <path d="M 294 400 L 314 400 C 326 400, 326 422, 314 422 L 294 422" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" strokeLinejoin="miter" fill="none" />
            <line x1="310" y1="422" x2="326" y2="444" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" />

            {/* Letter 7: A */}
            <line x1="358" y1="400" x2="340" y2="444" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" />
            <line x1="358" y1="400" x2="376" y2="444" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" />
            <line x1="347" y1="427" x2="369" y2="427" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" />

            {/* Letter 8: G */}
            <path d="M 420 412 C 413 400, 388 400, 388 422 C 388 444, 420 444, 420 422 L 404 422" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" fill="none" />

            {/* Letter 9: E - Detached floating top bar + Lower body */}
            <line x1="434" y1="400" x2="466" y2="400" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" />
            <path d="M 466 444 L 438 444 L 438 418 L 460 418" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" strokeLinejoin="miter" fill="none" />
          </g>
        </svg>
      </div>
    );
  }

  // Component breakdown for icon-only or horizontal layout
  return (
    <div className={`flex ${layout === 'horizontal' ? 'flex-row items-center gap-3.5' : 'flex-col items-center justify-center text-center'} ${className}`}>
      {/* Anchor Emblem Vector */}
      <div className={`${iconSizes} flex items-center justify-center shrink-0`}>
        <svg 
          viewBox="0 0 500 400" 
          fill="none" 
          xmlns="http://www.w3.org/2000/svg"
          className="w-full h-full select-none"
        >
          {/* Top Anchor Ring */}
          <circle 
            cx="250" 
            cy="70" 
            r="18" 
            stroke={markColor} 
            strokeWidth="11" 
            fill="none" 
          />

          {/* Horizontal Stock / Crossbar */}
          <line 
            x1="168" 
            y1="102" 
            x2="332" 
            y2="102" 
            stroke={markColor} 
            strokeWidth="11" 
            strokeLinecap="butt" 
          />

          {/* Center Vertical Shank */}
          <line 
            x1="250" 
            y1="88" 
            x2="250" 
            y2="278" 
            stroke={markColor} 
            strokeWidth="11" 
            strokeLinecap="butt" 
          />

          {/* Left Mirrored 'E' */}
          <line 
            x1="178" 
            y1="124" 
            x2="228" 
            y2="124" 
            stroke={markColor} 
            strokeWidth="11" 
            strokeLinecap="butt" 
          />
          <line 
            x1="190" 
            y1="164" 
            x2="228" 
            y2="164" 
            stroke={markColor} 
            strokeWidth="11" 
            strokeLinecap="butt" 
          />
          <path 
            d="M 228 124 L 228 212 C 228 234, 196 234, 175 204" 
            stroke={markColor} 
            strokeWidth="11" 
            strokeLinecap="round" 
            strokeLinejoin="round" 
            fill="none" 
          />

          {/* Right Normal 'E' */}
          <line 
            x1="272" 
            y1="124" 
            x2="322" 
            y2="124" 
            stroke={markColor} 
            strokeWidth="11" 
            strokeLinecap="butt" 
          />
          <line 
            x1="272" 
            y1="164" 
            x2="310" 
            y2="164" 
            stroke={markColor} 
            strokeWidth="11" 
            strokeLinecap="butt" 
          />
          <path 
            d="M 272 124 L 272 212 C 272 234, 304 234, 325 204" 
            stroke={markColor} 
            strokeWidth="11" 
            strokeLinecap="round" 
            strokeLinejoin="round" 
            fill="none" 
          />

          {/* Bottom Outer Anchor Cradle */}
          <path 
            d="M 152 208 C 162 256, 222 280, 250 292 C 278 280, 338 256, 348 208" 
            stroke={markColor} 
            strokeWidth="11.5" 
            strokeLinecap="round" 
            strokeLinejoin="miter" 
            fill="none" 
          />
        </svg>
      </div>

      {/* Wordmark Vector */}
      {showText && (
        <div className={`${wordmarkWidths} ${layout === 'stacked' ? 'mt-2' : ''} flex items-center justify-center`}>
          <svg 
            viewBox="0 0 440 60" 
            fill="none" 
            xmlns="http://www.w3.org/2000/svg"
            className="w-full h-auto select-none"
          >
            {/* Letter 1: E - Detached floating top bar + Lower body */}
            <line x1="8" y1="6" x2="40" y2="6" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" />
            <path d="M 40 50 L 12 50 L 12 24 L 34 24" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" strokeLinejoin="miter" fill="none" />

            {/* Letter 2: N */}
            <line x1="56" y1="6" x2="56" y2="50" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" />
            <line x1="56" y1="6" x2="90" y2="50" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" />
            <line x1="90" y1="6" x2="90" y2="50" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" />

            {/* Letter 3: T */}
            <line x1="104" y1="6" x2="140" y2="6" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" />
            <line x1="122" y1="6" x2="122" y2="50" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" />

            {/* Letter 4: O */}
            <circle cx="174" cy="28" r="22" stroke={markColor} strokeWidth="5.5" fill="none" />

            {/* Letter 5: U */}
            <path d="M 210 6 L 210 32 C 210 50, 242 50, 242 32 L 242 6" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" fill="none" />

            {/* Letter 6: R */}
            <line x1="256" y1="6" x2="256" y2="50" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" />
            <path d="M 256 6 L 276 6 C 288 6, 288 28, 276 28 L 256 28" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" strokeLinejoin="miter" fill="none" />
            <line x1="272" y1="28" x2="288" y2="50" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" />

            {/* Letter 7: A */}
            <line x1="320" y1="6" x2="302" y2="50" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" />
            <line x1="320" y1="6" x2="338" y2="50" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" />
            <line x1="309" y1="33" x2="331" y2="33" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" />

            {/* Letter 8: G */}
            <path d="M 382 18 C 375 6, 350 6, 350 28 C 350 50, 382 50, 382 28 L 366 28" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" fill="none" />

            {/* Letter 9: E - Detached floating top bar + Lower body */}
            <line x1="396" y1="6" x2="428" y2="6" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" />
            <path d="M 428 50 L 400 50 L 400 24 L 422 24" stroke={markColor} strokeWidth="5.5" strokeLinecap="butt" strokeLinejoin="miter" fill="none" />
          </svg>
        </div>
      )}
    </div>
  );
};