// Orchestration stage used by the Why ATELA section.
const MARKETPLACE_SPECIALTY_ROWS = [
  [
    { id: 'ad-creative', label: 'Ad Creative', bg: '#DAF277', fg: '#16210F' },
    { id: 'social-assets', label: 'Social Assets', bg: '#C9E2FB', fg: '#233645' },
    { id: 'video-production', label: 'Video Production', bg: '#2C2528', fg: '#F4B8D4' },
  ],
  [
    { id: 'photography', label: 'Photography', bg: '#EEF0DD', fg: '#223021' },
    { id: 'motion-graphics', label: 'Motion Graphics', bg: '#F7EDD7', fg: '#272117' },
    { id: 'presentations', label: 'Presentations', bg: '#0B2A28', fg: '#DFF688' },
  ],
  [
    { id: 'web-ui-design', label: 'Web & UI Design', bg: '#DCF280', fg: '#142111' },
    { id: 'ooh-fake-ooh', label: 'OOH & Fake OOH', bg: '#2E5C53', fg: '#D9F2D2' },
    { id: 'illustration', label: 'Illustration', bg: '#C8E1FB', fg: '#233748' },
    { id: 'email-design', label: 'Email Design', bg: '#20698A', fg: '#EDF8FF' },
  ],
  [
    { id: 'brand-strategy', label: 'Brand Strategy', bg: '#F4E7D0', fg: '#2A2418' },
    { id: 'three-d-design', label: '3D Design', bg: '#35594E', fg: '#DCF0D2' },
    { id: 'copywriting', label: 'Copywriting', bg: '#F7ECD9', fg: '#231D16' },
    { id: 'ai-consulting', label: 'AI Consulting', bg: '#2F252B', fg: '#F5AEBB' },
  ],
  [
    { id: 'campaign-development', label: 'Campaign Development', bg: '#DAF277', fg: '#16210F' },
    { id: 'ai-enhanced-creative', label: 'AI Enhanced Creative', bg: '#C5E0FB', fg: '#223646' },
    { id: 'and-more', label: '...and more', bg: '#EFF1DF', fg: '#2A2D1C' },
  ],
];

const MARKETPLACE_EXPERT_LAYOUT = [
  { x: '81%', y: '19.5%' },
  { x: '75%', y: '37.5%' },
  { x: '87%', y: '53.5%' },
  { x: '79%', y: '72.5%' },
];

const MARKETPLACE_FLOW_WIRES = [
  { id: 'market-wire-1', d: 'M198 188 C 288 194, 372 220, 458 252', x1: '198', y1: '188', x2: '458', y2: '252' },
  { id: 'market-wire-2', d: 'M202 236 C 296 242, 376 254, 460 268', x1: '202', y1: '236', x2: '460', y2: '268' },
  { id: 'market-wire-3', d: 'M208 286 C 308 288, 384 288, 462 284', x1: '208', y1: '286', x2: '462', y2: '284' },
  { id: 'market-wire-4', d: 'M208 338 C 308 330, 386 318, 462 300', x1: '208', y1: '338', x2: '462', y2: '300' },
  { id: 'market-wire-5', d: 'M214 388 C 314 368, 390 342, 464 318', x1: '214', y1: '388', x2: '464', y2: '318' },
  { id: 'market-wire-6', d: 'M534 252 C 622 224, 706 186, 810 142', x1: '534', y1: '252', x2: '810', y2: '142' },
  { id: 'market-wire-7', d: 'M536 272 C 620 262, 688 248, 752 242', x1: '536', y1: '272', x2: '752', y2: '242' },
  { id: 'market-wire-8', d: 'M536 292 C 636 314, 736 324, 872 332', x1: '536', y1: '292', x2: '872', y2: '332' },
  { id: 'market-wire-9', d: 'M532 310 C 618 360, 700 406, 792 438', x1: '532', y1: '310', x2: '792', y2: '438' },
];

function getMarketplaceAccentTextColor(color) {
  return ['#C6FF3D', '#E8D5B0', '#FFB020'].includes(color) ? '#0A0A0A' : '#fff';
}

function getMarketplaceAgentLabel(spec) {
  if (!spec) return 'Expert';
  return spec.split('·')[0].trim();
}

function MarketplaceMotion({ copy, currentLocale, className = '' }) {
  const agents = (copy.agents || []).slice(0, MARKETPLACE_EXPERT_LAYOUT.length);
  const motionPills = copy.motionPills || MARKETPLACE_SPECIALTY_ROWS.flat().map((item) => item.label);
  let motionPillIndex = 0;
  const specialtyRows = MARKETPLACE_SPECIALTY_ROWS.map((row) => (
    row.map((item) => {
      const next = {
        ...item,
        displayLabel: motionPills[motionPillIndex] || item.label,
        delay: `${motionPillIndex * 0.08}s`,
      };
      motionPillIndex += 1;
      return next;
    })
  ));
  const motionAriaLabel = currentLocale === 'ko'
    ? 'ATELA 에이전트 오케스트레이션 모션 그래픽'
    : 'ATELA agent orchestration motion graphic';

  return (
    <div className={`atela-market-motion${className ? ` ${className}` : ''}`} role="img" aria-label={motionAriaLabel}>
      <div className="market-motion-frame">
        <div className="market-motion-orb market-motion-orb-left" aria-hidden="true"/>
        <div className="market-motion-orb market-motion-orb-right" aria-hidden="true"/>
        <div className="market-motion-stage">
          <svg
            className="market-motion-lines"
            viewBox="0 0 1000 560"
            preserveAspectRatio="none"
            aria-hidden="true"
          >
            <defs>
              {MARKETPLACE_FLOW_WIRES.map((wire) => (
                <linearGradient
                  key={wire.id}
                  id={wire.id}
                  x1={wire.x1}
                  y1={wire.y1}
                  x2={wire.x2}
                  y2={wire.y2}
                  gradientUnits="userSpaceOnUse"
                >
                  <stop offset="0%" stopColor="#C6FF3D" stopOpacity="0"/>
                  <stop offset="8%" stopColor="#C6FF3D" stopOpacity="0.65"/>
                  <stop offset="18%" stopColor="#C6FF3D" stopOpacity="0.92"/>
                  <stop offset="50%" stopColor="#C6FF3D" stopOpacity="1"/>
                  <stop offset="82%" stopColor="#C6FF3D" stopOpacity="0.92"/>
                  <stop offset="92%" stopColor="#C6FF3D" stopOpacity="0.65"/>
                  <stop offset="100%" stopColor="#C6FF3D" stopOpacity="0"/>
                </linearGradient>
              ))}
            </defs>
            {MARKETPLACE_FLOW_WIRES.map((wire, index) => (
              <g key={wire.id}>
                <path
                  className="market-motion-line-base"
                  d={wire.d}
                  stroke={`url(#${wire.id})`}
                />
                <path
                  className="market-motion-line-flow"
                  d={wire.d}
                  stroke={`url(#${wire.id})`}
                  style={{animationDelay: `${index * 0.14}s`}}
                />
              </g>
            ))}
          </svg>

          <div className="market-motion-layer market-motion-layer-left" aria-hidden="true">
            <div className="market-motion-pill-stack">
              {specialtyRows.map((row, rowIndex) => (
                <div key={`market-motion-row-${rowIndex}`} className="market-motion-pill-row">
                  {row.map((item) => (
                    <div
                      key={item.id}
                      className="market-motion-chip"
                      style={{
                        '--chip-bg': item.bg,
                        '--chip-fg': item.fg,
                        '--node-delay': item.delay,
                      }}
                    >
                      <span className="market-motion-chip-label">{item.displayLabel}</span>
                    </div>
                  ))}
                </div>
              ))}
            </div>
          </div>

          <div className="market-motion-hub" aria-hidden="true">
            <span className="market-motion-hub-ring market-motion-hub-ring-a"/>
            <span className="market-motion-hub-ring market-motion-hub-ring-b"/>
            <div className="market-motion-brand">
              <img className="market-motion-logo" src="/assets/logos/atela-logo-white.svg" alt="ATELA"/>
            </div>
          </div>

          <div className="market-motion-layer market-motion-layer-right" aria-hidden="true">
            {agents.map((agent, index) => {
              const layout = MARKETPLACE_EXPERT_LAYOUT[index];
              return (
                <div
                  key={agent.n}
                  className="market-motion-expert"
                  style={{
                    left: layout.x,
                    top: layout.y,
                    '--node-delay': `${0.92 + index * 0.16}s`,
                  }}
                >
                  <span
                    className={`market-motion-expert-avatar${agent.image ? ' has-image' : ''}`}
                    style={{
                      background: agent.color,
                      color: getMarketplaceAccentTextColor(agent.color),
                    }}
                  >
                    {agent.image ? (
                      <img src={agent.image} alt="" aria-hidden="true"/>
                    ) : agent.h}
                  </span>
                  <span className="market-motion-expert-role">{getMarketplaceAgentLabel(agent.spec)}</span>
                </div>
              );
            })}
          </div>
        </div>
      </div>
    </div>
  );
}

window.MarketplaceMotion = MarketplaceMotion;