/* Ez Studio – Easy Driver featured card (dark premium) */
/* eslint-disable */

const ED = {
  ink: '#0a0a0a',
  ink2: '#0e0d10',
  border: 'rgba(255,255,255,0.08)',
  borderHi: 'rgba(167,139,250,0.22)',
  fg: '#f6f4ef',
  fg2: 'rgba(246,244,239,0.62)',
  fg3: 'rgba(246,244,239,0.4)',
  purple: '#a78bfa',
  purpleSoft: 'rgba(167,139,250,0.14)',
};

function EDChip({ children }) {
  return (
    <span style={{
      display: 'inline-flex', alignItems: 'center', gap: 6,
      height: 26, padding: '0 11px',
      border: `1px solid ${ED.border}`,
      borderRadius: 999,
      fontFamily: 'JetBrains Mono, monospace',
      fontSize: 10, letterSpacing: '0.08em', textTransform: 'uppercase',
      color: ED.fg2, background: 'rgba(255,255,255,0.02)',
    }}>
      <span style={{ width: 4, height: 4, borderRadius: 999, background: ED.purple, boxShadow: `0 0 6px ${ED.purple}` }}/>
      {children}
    </span>
  );
}

function EDAppTile({ src, name, role, badge }) {
  return (
    <div style={{
      display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12,
      minWidth: 130,
    }}>
      <div style={{ position: 'relative' }}>
        <div style={{
          width: 92, height: 92, borderRadius: 22, overflow: 'hidden',
          border: `1px solid ${ED.border}`,
          boxShadow: '0 24px 48px -16px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.02) inset',
          background: '#000',
        }}>
          <img src={src} alt={name} style={{ width: '100%', height: '100%', display: 'block', objectFit: 'cover' }}/>
        </div>
        {badge && (
          <div style={{
            position: 'absolute', top: -6, right: -6,
            padding: '3px 8px',
            background: ED.purple, color: ED.ink,
            fontSize: 9, fontWeight: 600,
            fontFamily: 'JetBrains Mono, monospace',
            letterSpacing: '0.08em', textTransform: 'uppercase',
            borderRadius: 999,
          }}>{badge}</div>
        )}
      </div>
      <div style={{ textAlign: 'center' }}>
        <div style={{
          fontFamily: 'Inter, sans-serif',
          fontSize: 14, fontWeight: 500, color: ED.fg, letterSpacing: '-0.01em',
        }}>{name}</div>
        <div style={{
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 10, color: ED.fg3, marginTop: 3,
          letterSpacing: '0.14em', textTransform: 'uppercase',
        }}>{role}</div>
      </div>
    </div>
  );
}

function EDConnector({ label, vertical = false }) {
  if (vertical) {
    return (
      <div style={{
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        gap: 8, padding: '8px 0',
      }}>
        <div style={{ width: 1, height: 22, background: `linear-gradient(${ED.border}, ${ED.purple})` }}/>
        <div style={{
          width: 6, height: 6, borderRadius: 999, background: ED.purple,
          boxShadow: `0 0 12px ${ED.purple}`,
        }}/>
        <div style={{ width: 1, height: 22, background: `linear-gradient(${ED.purple}, ${ED.border})` }}/>
      </div>
    );
  }
  return (
    <div style={{
      display: 'flex', flexDirection: 'column', alignItems: 'center',
      gap: 8, padding: '0 4px', minWidth: 110,
    }}>
      <div style={{
        display: 'flex', alignItems: 'center', width: '100%', gap: 6,
      }}>
        <div style={{ flex: 1, height: 1, background: `linear-gradient(90deg, ${ED.border}, ${ED.purple})` }}/>
        <div style={{ width: 6, height: 6, borderRadius: 999, background: ED.purple, boxShadow: `0 0 12px ${ED.purple}` }}/>
        <div style={{ flex: 1, height: 1, background: `linear-gradient(90deg, ${ED.purple}, ${ED.border})` }}/>
      </div>
      <div style={{
        fontFamily: 'JetBrains Mono, monospace',
        fontSize: 9, color: ED.fg3,
        letterSpacing: '0.16em', textTransform: 'uppercase',
        whiteSpace: 'nowrap',
      }}>{label}</div>
    </div>
  );
}

/* Main featured card */
function EasyDriverCard({ T, layout = 'wide', stacked = false, height }) {
  // layout 'wide' = horizontal (text left, apps right)
  // layout 'stack' = vertical (text top, apps bottom)
  const ED_T = T.ed;
  const horizontal = layout === 'wide';
  const lang = (typeof window !== 'undefined' && window.__ezLang) || 'pt';

  return (
    <a
      href={`easy-driver.html?lang=${lang}`}
      style={{ display: 'block', textDecoration: 'none', color: 'inherit' }}
      onMouseEnter={(e) => {
        e.currentTarget.firstChild.style.borderColor = ED.borderHi;
        e.currentTarget.firstChild.style.transform = 'translateY(-2px)';
      }}
      onMouseLeave={(e) => {
        e.currentTarget.firstChild.style.borderColor = ED.border;
        e.currentTarget.firstChild.style.transform = 'translateY(0)';
      }}
    >
    <div style={{
      position: 'relative',
      background: `radial-gradient(120% 80% at 0% 0%, rgba(167,139,250,0.10) 0%, rgba(167,139,250,0) 50%), ${ED.ink}`,
      border: `1px solid ${ED.border}`,
      borderRadius: 18,
      padding: horizontal ? '36px 40px' : '32px 28px',
      color: ED.fg,
      fontFamily: 'Inter, sans-serif',
      overflow: 'hidden',
      boxShadow: '0 1px 0 rgba(255,255,255,0.04) inset, 0 30px 80px -40px rgba(0,0,0,0.6)',
      transition: 'transform 0.25s cubic-bezier(0.2,0,0,1), border-color 0.25s',
      cursor: 'pointer',
      ...(height ? { minHeight: height } : {}),
    }}>
      {/* subtle grid */}
      <div style={{
        position: 'absolute', inset: 0, pointerEvents: 'none',
        backgroundImage: `linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px)`,
        backgroundSize: '32px 32px',
        maskImage: 'radial-gradient(80% 80% at 100% 100%, black 0%, transparent 70%)',
        WebkitMaskImage: 'radial-gradient(80% 80% at 100% 100%, black 0%, transparent 70%)',
      }}/>

      {/* Top row: tag + live */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: horizontal ? 28 : 22, position: 'relative' }}>
        <span style={{
          fontFamily: 'JetBrains Mono, monospace',
          fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase',
          color: ED.purple,
        }}>{ED_T.tag}</span>
        <span style={{
          display: 'inline-flex', alignItems: 'center', gap: 6,
          fontFamily: 'JetBrains Mono, monospace', fontSize: 10,
          letterSpacing: '0.14em', textTransform: 'uppercase',
          color: ED.fg3,
        }}>
          <span style={{
            width: 6, height: 6, borderRadius: 999, background: '#22d36b',
            boxShadow: '0 0 8px #22d36b',
          }}/>
          {ED_T.live}
        </span>
      </div>

      {/* Body */}
      <div style={{
        display: 'grid',
        gridTemplateColumns: horizontal ? '1.15fr 1fr' : '1fr',
        gap: horizontal ? 56 : 32,
        alignItems: 'center',
        position: 'relative',
      }}>
        {/* Left: title + desc + features */}
        <div>
          <h3 style={{
            fontFamily: 'Inter, sans-serif',
            fontSize: horizontal ? 48 : 38,
            fontWeight: 500,
            margin: 0, letterSpacing: '-0.03em',
            lineHeight: 1.0,
            color: ED.fg,
          }}>
            {ED_T.title}
          </h3>
          <p style={{
            fontSize: 15, lineHeight: 1.65,
            color: ED.fg2, margin: '16px 0 22px',
            maxWidth: 480, fontWeight: 400,
          }}>{ED_T.desc}</p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8 }}>
            {ED_T.features.map((f) => <EDChip key={f}>{f}</EDChip>)}
          </div>
        </div>

        {/* Right: two app tiles + connector */}
        <div style={{
          display: 'flex',
          flexDirection: stacked ? 'column' : 'row',
          alignItems: 'center', justifyContent: 'center',
          gap: stacked ? 0 : 0,
        }}>
          <EDAppTile
            src="assets/easy-driver-passenger.png"
            name={ED_T.passengerName}
            role={ED_T.passengerRole}
          />
          <EDConnector label={ED_T.connect} vertical={stacked} />
          <EDAppTile
            src="assets/easy-driver-partner.png"
            name={ED_T.partnerName}
            role={ED_T.partnerRole}
            badge="B2B"
          />
        </div>
      </div>
    </div>
    </a>
  );
}

Object.assign(window, { EasyDriverCard, EDChip, EDAppTile, EDConnector, ED });